/* These imports come first and their order is particular. */
/* Highly general things */
/* We start with some basic very broadly-applicable rules */
/* Remove any spacing that the browser puts around the page, so that we can draw things that extend all the way to the edge of the screen. */
html, body {
  margin: 0;
  padding: 0; }

/* This ensures that a horizontal scrollbar never appears on the page, because it looks really bad. */
html, body {
  overflow-x: hidden; }

/* All pages use our off-white color for the background. */
body {
  background-color: #fcf9f4; }

/* Give the entire body a default font size and family to make sure the font always appears consistent across browsers even if we forget to set it somewhere. */
body {
  font-size: 16px;
  font-family: Lato, sans-serif; }

/* Disable auto-enlargement of small text in mobile Safari
https://blog.55minutes.com/2012/04/iphone-text-resizing/ */
body {
  -webkit-text-size-adjust: 100%; }

/* Code is shown in a monospace font, of course. */
code {
  font-family: "Fira Mono", monospace; }

/* If a code block has the "wrap" attribute, then its lines are allowed to wrap. */
.wrap code {
  white-space: pre-wrap; }

/* Whitespace in code is typically important. For example, if we write `"  "` in markdown which renders to <code>"  "</code> in HTML, that denotes a string literal consisting of two spaces, and it does not mean the same thing if we allow the browser to collapse the two spaces into one. Furthermore, we would not want such code to be line wrapped, because that also has the possibility of obscuring significant whitespace, and also because wrapped expressions become difficult to read. */
code {
  white-space: pre; }

/* Buttons and form inputs usually look best in a sans-serif font */
button, input {
  font-family: Lato, sans-serif; }

/* We have a particular font that we apply to all the "header" elements */
h1, h2, h3, h4, h5, h6 {
  font-family: "Fira Sans Condensed", sans-serif; }

/* *Strong* text is urgent or serious, and conventionally displayed in bold. */
strong {
  font-weight: bold; }

/* /Emphatic/ text is conventionally shown in italics. */
em {
  font-style: italic; }

/* By default, superscripts and subscripts can affect line height, leading to a visually unappealing inconsistency in the line heights within a paragraph. This is a fix for that problem. */
sup, sub {
  line-height: 1; }

sup {
  vertical-align: text-top; }

sub {
  vertical-align: text-bottom; }

/* Browsers underline links by default; we disable this. In some cases we may underline links, but we will turn this on on a case-by-case basis. */
a {
  text-decoration: none; }

/* Sometimes we indicate links using a green color (but we don't set this as the default, we just provide this mixin and enable it where appropriate.) */
/* If you want darker links, use this alternate form. */
/* Show a bright contrasting outline around whatever's in focus to make it easy to see. */
:focus {
  outline: 2px solid orange; }

/* On large screens, we constrain the size of the main page content. In most cases, this is done by wrapping content in a <div class="container"> element, as is the conventional approach (popularized by Bootstrap). We also include a little bit of left and right padding in container so that on smaller screens the content will not come too close to the edge of the screen. */
.container {
  max-width: 1040px;
  padding-left: 20px;
  padding-right: 20px;
  /* Setting left and right margins to 'auto' centers the content on the page. */
  margin-left: auto;
  margin-right: auto;
  display: block; }

/* Sometimes we customize the selection background color. We don't do this everywhere, but the color is defined here for the places that do. */
/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* Most of our prose is written in a block that we call "tufte" -- named after https://github.com/edwardtufte/tufte-css */
/* For long prose, we prefer serifs and a spacious line height for easy reading. */
.tufte {
  font-family: Bitter, serif;
  font-size: 16px; }
  .tufte ul, .tufte ol, .tufte p, .tufte .note__content {
    line-height: 1.6em; }
  .tufte li {
    padding: 0.2em 0; }
    .tufte li p {
      margin-top: 0;
      margin-bottom: 0; }
    .tufte li ul, .tufte li ol {
      margin-top: 0.5em; }

/* Add some spacing between sections. */
.tufte section.level2 {
  padding: 10px 0; }

/* Links have the same color as the regular text, and we indicate that they're links using an underline. */
.tufte__link:link, .tufte__link:visited {
  color: inherit; }

.tufte__link:link {
  text-decoration: none;
  background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
  background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
  background-position: 0% 93%, 100% 93%, 0% 93%; }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .tufte__link:link {
      background-position-y: 87%, 87%, 93%; } }
  .tufte__link:link:link::selection, .tufte__link:link:link::-moz-selection {
    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
    background: #b4d5fe;
    /* todo - selected smart-underline text looks bad, this isn't working? */ }

/* We indicate that a link is "external" (that you're leaving our site) by adding an icon after it. */
.tufte a.external:after, .phrasebook a.external:after {
  font: normal normal normal 9px/1 FontAwesome;
  content: "\00a0\00a0\f08e";
  font-weight: bold; }

/* For code that is inline with the prose, we adjust the font size so it matches the serif face, and set some background color to make it more clear that it's code. */
.tufte p code, .tufte ul code, .tufte ol code, .tufte table code {
  font-size: 14px;
  border-radius: 2px;
  /* Apply the 'plain' class to a 'code' element to avoid getting the background color. */ }
  .tufte p code:not(.plain), .tufte ul code:not(.plain), .tufte ol code:not(.plain), .tufte table code:not(.plain) {
    background-color: #eaefe3; }

/* If code is inside a link, don't apply the usual background coloring. It doesn't play well with the underlining, and the underlining is sufficient to visually set it apart from the text anyway. */
.tufte a code:not(.plain) {
  background: none; }

.tufte table {
  border-collapse: collapse; }

/* Lists inside tables are more compact. */
.tufte table ul, .tufte table ol {
  line-height: 1.25em;
  padding: 0 0 0 1.5em;
  margin: 0.5em 0; }
  .tufte table ul li, .tufte table ol li {
    padding: 0; }

/* On small screens, all notes are marked with the same symbol. In this layout, there's no point in showing numbers, nor any reason to distinguish marked notes from unmarked notes. */
@media not all and (min-width: 760px) {
  .tufte--withNotes .note__label:before {
    content: "\2295"; } }

/* On big screens, we get fancier with the note labels. */
@media (min-width: 760px) {
  /* For marked notes, the numbering happens automatically via CSS. */
  body {
    counter-reset: note-counter; }
  /* Marked notes are the ones that have superscripted numbers in the text that refer to the note. */
  .tufte--withNotes .note--marked .note__label {
    counter-increment: note-counter; }
  .tufte--withNotes .note--marked .note__label:after {
    content: counter(note-counter);
    color: #333;
    font-weight: bold;
    font-size: 10px;
    font-family: Lato, sans-serif;
    position: relative;
    top: -0.4rem;
    vertical-align: baseline; }
  /* The note content also displays its number, so thus the number appears in two places, providing a visual link between the note content and the place in the text that refers to it. */
  .tufte--withNotes .note--marked .note__content:before {
    content: counter(note-counter) " ";
    color: #333;
    font-weight: bold;
    font-size: 10px;
    font-family: Lato, sans-serif;
    position: relative;
    top: -0.4rem;
    vertical-align: baseline; } }

/* Apply this mixin to things within a .tufte block that need to be exempt from the tufte width limitations. */
/* On big screens, we have two-column layout with paragraphs on the left and floating notes on the right. */
/* First we reduce the width of all the block elements, thus leaving a chunk of empty space on the right. We make an exception for anything that has the "wide" class, which we apply to display things that need more space to show, such as large code blocks. */
@media (min-width: 760px) {
  .tufte--withNotes {
    /* Use the fullWidth class to insert a chunk that is exempt from the whole margin-notes thing. */ }
    .tufte--withNotes p, .tufte--withNotes ul, .tufte--withNotes ol, .tufte--withNotes hr, .tufte--withNotes pre, .tufte--withNotes pre.sourceCode, .tufte--withNotes div.notWide {
      box-sizing: border-box;
      max-width: 60%; }
      .tufte--withNotes p.wide, .tufte--withNotes ul.wide, .tufte--withNotes ol.wide, .tufte--withNotes hr.wide, .tufte--withNotes pre.wide, .tufte--withNotes pre.sourceCode.wide, .tufte--withNotes div.notWide.wide {
        max-width: none;
        clear: both; } }
    @media print and (min-width: 760px) {
      .tufte--withNotes p, .tufte--withNotes ul, .tufte--withNotes ol, .tufte--withNotes hr, .tufte--withNotes pre, .tufte--withNotes pre.sourceCode, .tufte--withNotes div.notWide {
        max-width: none;
        clear: both; } }
@media (min-width: 760px) {
    .tufte--withNotes div.wide {
      clear: both; } }
    @media (min-width: 760px) and (min-width: 760px) {
      .tufte--withNotes div.wide p, .tufte--withNotes div.wide ul, .tufte--withNotes div.wide ol, .tufte--withNotes div.wide hr, .tufte--withNotes div.wide pre {
        max-width: none; }
      .tufte--withNotes div.wide table {
        width: auto; } }
@media (min-width: 760px) {
    .tufte--withNotes table {
      width: 60%; }
      .tufte--withNotes table.wide {
        width: auto; } }
    @media print and (min-width: 760px) {
      .tufte--withNotes table {
        width: auto; } }
@media (min-width: 760px) {
    .tufte--withNotes ul p, .tufte--withNotes ul ul, .tufte--withNotes ul ol, .tufte--withNotes ul pre.sourceCode, .tufte--withNotes ol p, .tufte--withNotes ol ul, .tufte--withNotes ol ol, .tufte--withNotes ol pre.sourceCode, .tufte--withNotes table p, .tufte--withNotes table ul, .tufte--withNotes table ol, .tufte--withNotes table pre.sourceCode {
      max-width: initial; }
    .tufte--withNotes ul table, .tufte--withNotes ol table, .tufte--withNotes table table {
      width: 100%; }
    .tufte--withNotes .fullWidth {
      border-width: 1px 0;
      border-style: solid;
      border-color: #e1d5a7;
      margin: 2em 0;
      padding: 2em 0; }
      .tufte--withNotes .fullWidth table {
        width: auto;
        margin-left: auto;
        margin-right: auto; }
      .tufte--withNotes .fullWidth p, .tufte--withNotes .fullWidth ul, .tufte--withNotes .fullWidth ol, .tufte--withNotes .fullWidth pre {
        max-width: initial; } }

/* Then we float all the note content to the right, to place the notes in that empty space. */
@media (min-width: 760px) {
  .tufte--withNotes .note__content {
    margin: 0 -60% 0 0;
    width: 50%;
    float: right;
    clear: right;
    /* Margin content needs to render *above* the main content. Usually this isn't relevant, because we try not to let main content and margin notes have any overlap. But there are circumstances in which some benign overlap occurs; in those cases, it is always an *empty* portion of the main content that is running into some *nonempty* portion of margin note, and thus the margin content needs to be on top so that its hyperlinks remain clickable. */
    z-index: 1; } }
  @media (min-width: 760px) and (min-width: 760px) {
    .tufte--withNotes .note__content p, .tufte--withNotes .note__content ul, .tufte--withNotes .note__content ol, .tufte--withNotes .note__content hr, .tufte--withNotes .note__content pre {
      max-width: none; }
    .tufte--withNotes .note__content table {
      width: auto; } }
/* On big screens, unmarked note labels are hidden (which is why they are called "unmarked"). */
@media (min-width: 760px) {
  .tufte--withNotes .note--unmarked .note__label {
    display: none; } }

/* When notes are displayed in the margin, they are slightly smaller than the main text. */
@media (min-width: 760px) {
  .tufte--withNotes .note__content {
    font-size: 14px; }
    .tufte--withNotes .note__content code {
      font-size: 12px; }
    .tufte--withNotes .note__content a.external:after {
      font-size: 9px/1; } }

/* Images in margin notes generally need to be scaled down to fit within the margin. */
@media (min-width: 760px) {
  .tufte--withNotes .note__content img {
    max-width: 100%; } }

/* When notes are displayed in the margin, they need some space added to the bottom so that two notes won't display too close together. */
@media (min-width: 760px) {
  .tufte--withNotes .note__content {
    margin-bottom: 20px; } }

/* On small screens, we hide the notes by default, and each reference to a note is a link (called 'margin-toggle') that you can click to make it appear. */
@media not all and (min-width: 760px) {
  .tufte--withNotes {
    /* While the box is unchecked, the corresponding note is hidden. */
    /* Float the note so it can appears between lines in a paragraph. */ }
    .tufte--withNotes .note__label {
      cursor: pointer;
      color: #518f51; }
    .tufte--withNotes .note__toggle:not(:checked) + .note__content {
      display: none; }
    .tufte--withNotes .note__content {
      display: inline-block;
      width: 100%;
      float: left;
      clear: both; }
    .tufte--withNotes .note__content {
      margin: 16px 0;
      padding: 9px 13px;
      box-sizing: border-box;
      border-top: 1px solid #518f51;
      border-bottom: 1px solid #518f51; } }

/* The checkbox that the margin-toggle mechanism uses is never visible. */
.tufte--withNotes .note__toggle {
  display: none; }

/* Don't show the notes at all in print or screen reader form. */
@media not screen {
  .tufte--withNotes .note {
    display: none; } }

/* Videos and images have a bit of shadow around them - this is set them apart from the text content in a way that is not so heavyweight and distracting as a border. If an image has a transparent background, then apply the 'transparent' class to it, and the shadow will not be applied. */
.tufte video, .tufte__frame {
  box-shadow: 0 0 25px -5px black; }

/* The typical way to display media in a Tufte environment is to have it fill the left column. */
video.tufte__figure {
  width: 100%;
  margin: 2em 0; }

img.tufte__figure {
  max-width: 100%;
  margin: 1em 0; }

/* Blockquotes are displayed very simply, with a little padding and a thin line on the left. Code inside a blockquote doesn't have a background, because the double decoration is excessive. */
.tufte blockquote {
  border-left: 1px solid black;
  padding: 0 1em;
  margin: 0.5em 1em; }
  .tufte blockquote pre.sourceCode {
    background: none; }

/* A horizontal rule is displayed as a line of three large dots. */
.tufte hr {
  opacity: 0.2;
  text-align: center;
  margin: 2em 0;
  letter-spacing: 1em;
  border: 0; }
  .tufte hr:after {
    content: '\25cf\25cf\25cf'; }

table.alignLeft th, table.alignLeft td {
  text-align: left; }

table.alignRight th, table.alignRight td {
  text-align: right; }

table.alignCenter th, table.alignCenter td {
  text-align: center; }

table.alignTop th, table.alignTop td {
  vertical-align: top; }

table.spacious th, table.spacious td {
  padding: 0.2em 0.6em;
  line-height: 1.5em; }

table.underlineHead {
  border-collapse: collapse; }
  table.underlineHead thead {
    border-bottom: 1px solid black; }

table.axisLines tr:first-child th, table.axisLines tr:first-child td {
  border-bottom: 1px solid black; }

table.axisLines th:first-child, table.axisLines td:first-child {
  border-right: 1px solid black; }

/* I'm not sure why this is necessary, but otherwise bad things happen on small screens when you expand a footnote that is immediately followed by a code block. */
@media not all and (min-width: 760px) {
  .tufte pre.sourceCode {
    clear: both; } }

.tufte .annotatedCode {
  margin-top: 2em;
  margin-bottom: 2em; }
  @media (min-width: 760px) {
    .tufte .annotatedCode p, .tufte .annotatedCode ul, .tufte .annotatedCode ol, .tufte .annotatedCode hr, .tufte .annotatedCode pre {
      max-width: none; }
    .tufte .annotatedCode table {
      width: auto; } }
/* The fact that the order of this one matters is probably a problem. */
/* This list is just alphabetical and its order should not matter. */
html.account h1, html.org h1 {
  text-align: center;
  margin-top: 2em;
  margin-bottom: 2em; }

html.account .main, html.org .main {
  padding-bottom: 2em; }

html.account dd, html.account dt, html.org dd, html.org dt {
  display: block; }

html.account dt, html.org dt {
  font-weight: bold; }

html.account dt:not(:first-of-type), html.org dt:not(:first-of-type) {
  margin-top: 1em; }

html.account dd, html.org dd {
  margin-top: 0.5em; }

html.account .couponList__coupon__productName, html.org .couponList__coupon__productName {
  font-style: italic; }

html.org .tufte a:link, html.org .tufte a:visited {
  color: inherit; }

html.org .tufte a:link {
  text-decoration: none;
  background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
  background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
  background-position: 0% 93%, 100% 93%, 0% 93%; }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    html.org .tufte a:link {
      background-position-y: 87%, 87%, 93%; } }
  html.org .tufte a:link:link::selection, html.org .tufte a:link:link::-moz-selection {
    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
    background: #b4d5fe;
    /* todo - selected smart-underline text looks bad, this isn't working? */ }

html.account .main {
  line-height: 1.8;
  font-family: Bitter, serif; }

html.account .main a:link, html.account .main a:visited {
  color: inherit;
  text-decoration: underline; }

/* big */
@media (min-width: 1140px) {
  .annotatedCode__title {
    text-align: right;
    font-family: "Fira Mono", monospace; }
  .annotatedCode__title,
  .annotatedCode__row {
    margin-left: auto;
    margin-right: auto;
    width: 1100px; }
  .annotatedCode__row--proseAndCode > *:nth-child(2) {
    border-left: 1px solid #5e5086;
    border-right: 1px solid #5e5086; }
    .annotatedCode__row--proseAndCode > *:nth-child(2), .annotatedCode__row--proseAndCode > *:nth-child(2) .sourceCode {
      margin: 0;
      overflow: visible;
      border-radius: 0; }
    .annotatedCode__row--proseAndCode > *:nth-child(2) code.sourceCode {
      padding: 0 1em; }
  .annotatedCode__row--codeOnly .sourceCode {
    margin: 0;
    overflow: visible;
    border-radius: 0; }
  .annotatedCode__row--codeOnly div.sourceCode {
    border-left: 1px solid #5e5086;
    border-right: 1px solid #5e5086; }
  .annotatedCode__row--codeOnly code.sourceCode {
    padding: 0 1em; }
  .annotatedCode .annotatedCode__code--endingWithBlankLine code.sourceCode {
    padding-bottom: 1.5em; }
  .annotatedCode__row--proseAndCode:first-child > *:first-child {
    margin-top: 10px; }
  .annotatedCode__row:first-child .annotatedCode__code {
    border-top: 1px solid #7d6bb3; }
    .annotatedCode__row:first-child .annotatedCode__code code.sourceCode {
      padding-top: 10px; }
  .annotatedCode__row:last-child .annotatedCode__code {
    border-bottom: 1px solid #7d6bb3; }
    .annotatedCode__row:last-child .annotatedCode__code code.sourceCode {
      padding-bottom: 10px; }
  .annotatedCode__row--proseAndCode {
    display: flex;
    justify-content: space-between;
    align-items: start; }
  .annotatedCode__row--proseAndCode:not(:last-child) {
    align-items: stretch; }
    .annotatedCode__row--proseAndCode:not(:last-child) .annotatedCode__code {
      height: 100%; }
  .annotatedCode__row--proseAndCode > *:nth-child(1),
  .annotatedCode__row--proseOnly {
    width: 475px; }
    .annotatedCode__row--proseAndCode > *:nth-child(1) > :first-child,
    .annotatedCode__row--proseOnly > :first-child {
      margin-top: 0; }
  .annotatedCode__row--proseAndCode > *:nth-child(2),
  .annotatedCode__row--codeOnly div.sourceCode {
    width: 575px; }
  .annotatedCode__row--codeOnly div.sourceCode {
    margin-left: auto; } }

/* small */
@media not all and (min-width: 1140px) {
  .annotatedCode__row {
    margin-left: auto;
    margin-right: auto;
    max-width: 1040px;
    padding-left: 20px;
    padding-right: 20px; }
  .annotatedCode__title {
    display: none; } }

/* At the top of every page, we have the banner, which includes the site title and a couple links. */
/* The banner is absolutely positioned, which means it takes up no space, so that it can appear on top of the art. */
.banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1; }

/* Because the banner's position is absolute, we must give it a fixed height. The height varies depending on the screen size. */
@media (min-width: 760px) {
  .banner .container {
    height: 100px; } }

@media not all and (min-width: 760px) {
  .banner .container {
    height: 108px; } }

/* We have two ways to display the site title, and we hide one of them depending on the display size. */
@media (min-width: 760px) {
  .banner__title--smol {
    display: none; } }

@media not all and (min-width: 760px) {
  .banner__title--big {
    display: none; } }

/* The small title is just text. */
.banner__title--smol, .banner__title--smol a {
  font-size: 30px;
  font-variant: small-caps;
  color: white; }

/* The titles are images, and we need to scale them to an appropriate size. */
.banner__title--big img {
  max-width: 400px; }

.banner__title--smol img {
  max-width: 250px; }

/* The links are text. */
.banner__links {
  font-size: 20px; }
  .banner__links a {
    color: rgba(255, 255, 255, 0.8); }

/* The links are plain so they'll be relatively undistracting, but that means they don't have any styling to indicate that they're links. So, to invite interaction a bit, we make them light up with some color when you cursor over them. The color change comes with a transition to slightly soften the effect. */
.banner__links a:hover {
  color: #faa152;
  transition: color 0.1s linear; }

/* The links are in a <ul> element, so we need to remove the default list styling. */
.banner__links {
  margin: 0;
  padding: 0; }

.banner__links li {
  display: inline; }

/* And we need to add some spacing between the links so they're not right up against each other. */
.banner__links li:not(:first-child) {
  margin-left: 40px; }

/* The layouts for how the title and links are positioned within the banner differ significantly based on screen size. */
/* On a large screen, the two are absolutely positioned within the container. The title appears on the left, and the links appear on the right. */
@media (min-width: 760px) {
  .banner .container {
    position: relative; }
  .banner__title--big, .banner__links {
    position: absolute;
    bottom: 0; }
  .banner__title--big {
    left: 20px; }
  .banner__links {
    right: 60px;
    bottom: 15px; } }

/* On a small screen, they are simply centered. The title appears above the links. */
@media not all and (min-width: 760px) {
  .banner .container {
    text-align: center; }
  .banner__links {
    padding-top: 10px; }
  .banner__title--smol {
    padding-top: 25px; } }

@media print {
  .banner__links {
    display: none; } }

/* Add enough padding to the art so that its contents don't overlap with the banner. */
@media (min-width: 760px) {
  .art {
    padding-top: 100px; } }

@media not all and (min-width: 760px) {
  .art {
    padding-top: 108px; } }

.art {
  background-size: cover;
  background-position: center; }

/* By default, the "art" is just solid blue. Some pages change the art by overriding this. */
.art {
  background-color: #00004c; }

/* The intro is the content that goes on top of the art. Not all page have intros. Notably, the home page does. */
/* If a page has intro content, its html element has the `hasIntro` class. */
/* Add enough padding to the art so that its contents don't overlap with the banner. */
@media (min-width: 760px) {
  .art {
    padding-top: 100px; } }

@media not all and (min-width: 760px) {
  .art {
    padding-top: 108px; } }

.art {
  background-size: cover;
  background-position: center; }

/* By default, the "art" is just solid blue. Some pages change the art by overriding this. */
.art {
  background-color: #00004c; }

/* The intro is the content that goes on top of the art. Not all page have intros. Notably, the home page does. */
/* If a page has intro content, its html element has the `hasIntro` class. */
/* These styles also apply to some other form pages that resemble the auth pages. */
html.auth h1 {
  text-align: center; }

html.auth .form__field label {
  display: block; }

html.auth input.form__control {
  border: 1px solid #c0c0c0;
  font-size: 18px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box; }

html.auth .form__buttonGroup {
  text-align: center; }

html.auth .form__button {
  background-color: #e06d06;
  color: white;
  border-width: 1px;
  border-radius: 5px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 16px; }

html.auth .loginLinks {
  text-align: center; }
  html.auth .loginLinks a {
    color: #518f51; }
  html.auth .loginLinks a:hover {
    color: #355e35; }

/* The "login links" link login-related pages to each other. These are in a <ul> element, and we remove the default list styling. */
html.auth .loginLinks ul {
  list-style-type: none;
  padding: 0; }

html.auth .form__feedback {
  margin-bottom: 2em;
  padding: 0 1em;
  border: 1px solid black;
  color: white;
  background: #452a2a; }

@media (min-width: 760px) {
  html.auth h1 {
    margin-top: 2em;
    margin-bottom: 2em; }
  html.auth .form {
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    padding: 40px 20px 20px;
    margin: 0 auto;
    max-width: 400px; }
  /* Vertical space between form fields. */
  html.auth .form__field {
    margin-bottom: 2em; }
  /* Vertical space to separate the login links from the form. */
  html.auth .loginLinks {
    margin-top: 3em; }
  /* Vertical space between the login links. */
  html.auth .loginLinks li {
    margin-bottom: 2em; }
  /* Space at the bottom of the page. */
  html.auth .main {
    padding-bottom: 2em; } }

@media not all and (min-width: 760px) {
  html.auth h1 {
    margin-top: 1em;
    margin-bottom: 1em; }
  /* Vertical space between form fields. */
  html.auth .form__field {
    margin-bottom: 2em; }
  /* Vertical space between form fields and the button */
  html.auth .form__buttonGroup {
    margin-top: 2em; }
  /* Vertical space to separate the login links from the form. */
  html.auth .loginLinks {
    margin-top: 3em; }
  /* Vertical space between the login links. */
  html.auth .loginLinks li {
    margin-bottom: 1em; }
  /* Space at the bottom of the page. */
  html.auth .main {
    padding-bottom: 2em; } }

/* Pages that just have a form with a single button */
html.logOut, html.signUpVerify {
  /* Center the instructions on the form. */
  /* Space at the bottom of the page. */ }
  html.logOut .main p, html.signUpVerify .main p {
    text-align: center; }
  @media (min-width: 760px) {
    html.logOut .main, html.signUpVerify .main {
      padding-bottom: 4em; } }
/* The page you land on after you've finished creating an account. */
html.signUpComplete .main h2 {
  margin-top: 2em; }

html.signUpComplete .nextSteps .buttonRow {
  text-align: center;
  margin: 2em 0; }
  html.signUpComplete .nextSteps .buttonRow a {
    background-color: #e06d06;
    color: white;
    padding: 6px 18px;
    cursor: pointer;
    font-size: 18px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px; }

/* The account recovery login page has two forms: One just to log in, and another that lets you set a password and also log in. */
html.recoveryLogin .main section:not(:last-child) {
  margin-bottom: 80px; }

html.recoveryLogin .main h1 {
  margin-bottom: 15px; }

html.recoveryLogin .main p {
  text-align: center; }

/* At the top of every page, we have the banner, which includes the site title and a couple links. */
/* The banner is absolutely positioned, which means it takes up no space, so that it can appear on top of the art. */
.banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1; }

/* Because the banner's position is absolute, we must give it a fixed height. The height varies depending on the screen size. */
@media (min-width: 760px) {
  .banner .container {
    height: 100px; } }

@media not all and (min-width: 760px) {
  .banner .container {
    height: 108px; } }

/* We have two ways to display the site title, and we hide one of them depending on the display size. */
@media (min-width: 760px) {
  .banner__title--smol {
    display: none; } }

@media not all and (min-width: 760px) {
  .banner__title--big {
    display: none; } }

/* The small title is just text. */
.banner__title--smol, .banner__title--smol a {
  font-size: 30px;
  font-variant: small-caps;
  color: white; }

/* The titles are images, and we need to scale them to an appropriate size. */
.banner__title--big img {
  max-width: 400px; }

.banner__title--smol img {
  max-width: 250px; }

/* The links are text. */
.banner__links {
  font-size: 20px; }
  .banner__links a {
    color: rgba(255, 255, 255, 0.8); }

/* The links are plain so they'll be relatively undistracting, but that means they don't have any styling to indicate that they're links. So, to invite interaction a bit, we make them light up with some color when you cursor over them. The color change comes with a transition to slightly soften the effect. */
.banner__links a:hover {
  color: #faa152;
  transition: color 0.1s linear; }

/* The links are in a <ul> element, so we need to remove the default list styling. */
.banner__links {
  margin: 0;
  padding: 0; }

.banner__links li {
  display: inline; }

/* And we need to add some spacing between the links so they're not right up against each other. */
.banner__links li:not(:first-child) {
  margin-left: 40px; }

/* The layouts for how the title and links are positioned within the banner differ significantly based on screen size. */
/* On a large screen, the two are absolutely positioned within the container. The title appears on the left, and the links appear on the right. */
@media (min-width: 760px) {
  .banner .container {
    position: relative; }
  .banner__title--big, .banner__links {
    position: absolute;
    bottom: 0; }
  .banner__title--big {
    left: 20px; }
  .banner__links {
    right: 60px;
    bottom: 15px; } }

/* On a small screen, they are simply centered. The title appears above the links. */
@media not all and (min-width: 760px) {
  .banner .container {
    text-align: center; }
  .banner__links {
    padding-top: 10px; }
  .banner__title--smol {
    padding-top: 25px; } }

@media print {
  .banner__links {
    display: none; } }

/* Add enough padding to the art so that its contents don't overlap with the banner. */
@media (min-width: 760px) {
  .art {
    padding-top: 100px; } }

@media not all and (min-width: 760px) {
  .art {
    padding-top: 108px; } }

.art {
  background-size: cover;
  background-position: center; }

/* By default, the "art" is just solid blue. Some pages change the art by overriding this. */
.art {
  background-color: #00004c; }

/* The intro is the content that goes on top of the art. Not all page have intros. Notably, the home page does. */
/* If a page has intro content, its html element has the `hasIntro` class. */
/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* "Breadcrumbs" are a list of links to pages with successively narrow subject matter, showing one way you might have gotten to the current page by following links. The bread crumbs are located directly below the banner. Not all pages have them. */
/* Breadcrumbs are represented as a list element, so we have to remove the default list styling. */
.breadcrumbs ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.breadcrumbs li {
  display: inline; }

/* The breadcrumbs always display as a single line of text. If the screen isn't wide enough to display it all, then we ellipsize the breadcrumbs. */
.breadcrumbs ul {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

/* The breadcrumbs are deemphasized a bit by coloring them gray. */
.breadcrumbs, .breadcrumbs a {
  color: #333; }

/* The links are underlined. */
.breadcrumbs a:link {
  text-decoration: none;
  background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
  background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
  background-position: 0% 93%, 100% 93%, 0% 93%; }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .breadcrumbs a:link {
      background-position-y: 87%, 87%, 93%; } }
  .breadcrumbs a:link:link::selection, .breadcrumbs a:link:link::-moz-selection {
    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
    background: #b4d5fe;
    /* todo - selected smart-underline text looks bad, this isn't working? */ }

/* The breadcrumb separator resembles an arrow pointing to the right. We place it between the crumbs. The way we do this varies for large and small screens, so here we define the separator as a mixin that the styling for both screen sizes will use. */
/* On big screens, it's simple: Every crumb except the last one has a separator after it. */
@media (min-width: 760px) {
  .breadcrumbs li:not(:last-child):after {
    content: '\25b6';
    font-size: 9px;
    display: inline-block;
    padding-left: 0.5em;
    padding-right: 0.3em;
    font-weight: bold;
    opacity: 0.8;
    position: relative;
    top: -1px; } }

/* For small screens, it's more complicated. We hide the less important crumbs to save space. Only the 2nd- and 3rd-last crumbs appear. */
@media not all and (min-width: 760px) {
  .breadcrumbs li:not(:nth-last-child(2)):not(:nth-last-child(3)) {
    display: none; } }

/* There is only one circumstance in which a separator needs to appear in the small layout, which is between the 2nd- and 3rd-last crumbs. */
@media not all and (min-width: 760px) {
  .breadcrumbs li:nth-last-child(3):after {
    content: '\25b6';
    font-size: 9px;
    display: inline-block;
    padding-left: 0.5em;
    padding-right: 0.3em;
    font-weight: bold;
    opacity: 0.8;
    position: relative;
    top: -1px; } }

/* Breadcrumbs always have some top padding to provide a comfortable space between them and the banner. */
.breadcrumbs ul {
  padding-top: 0.5em; }

/* On small screens, the breadcrumbs are centered, because most everything else at the top of the page is centered. */
@media not all and (min-width: 760px) {
  .breadcrumbs {
    text-align: center; } }

/* On big screens they're left-aligned, and we add some left padding to bump them over so that the left edge lines up with the logo decently. */
@media (min-width: 760px) {
  .breadcrumbs ul {
    padding-left: 0.5em; } }

/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
pre.sourceCode {
  background-color: #eaefe3;
  border-radius: 5px; }
  pre.sourceCode code {
    font-size: 15px;
    line-height: 1.5em; }

/* Code blocks have some top and bottom margin to separate them from adjacent blocks in the document. This is especially important if there are two back-to-back code blocks. */
pre.sourceCode {
  margin: 1em 0; }

/* A code block is constructed like this: <pre class="sourceCode"><code>...</code></pre>

The outer <pre> is allowed to scroll horizontally. */
pre.sourceCode {
  overflow-x: auto; }
  pre.sourceCode code {
    display: inline-block;
    padding: 1em 2em; }
  pre.sourceCode a:link {
    text-shadow: none;
    background: none; }

@media (min-width: 760px) {
  pre.sourceCode.numberSource {
    counter-reset: line-counter; }
    pre.sourceCode.numberSource code {
      padding-left: 0; }
    pre.sourceCode.numberSource a {
      counter-increment: line-counter; }
    pre.sourceCode.numberSource a::after {
      display: inline-block;
      content: counter(line-counter);
      text-align: right;
      border-right: 1px solid rgba(81, 143, 81, 0.9);
      color: rgba(81, 143, 81, 0.5);
      width: 50px;
      padding-right: 10px;
      margin-right: 10px; } }

pre.sourceCode {
  /* Keywords */
  /* Comments */
  /* GHCi prompt */ }
  pre.sourceCode .haskell .kw, pre.sourceCode .python .kw, pre.sourceCode .python .im {
    font-weight: bold;
    color: #00004c; }
  pre.sourceCode .haskell .co, pre.sourceCode .python .co {
    color: #2c4e2c; }
  pre.sourceCode .haskell .fu {
    color: #3f6e3f; }
  pre.sourceCode .ghci .an {
    font-weight: bold;
    color: #a751ae; }

/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* Most of our prose is written in a block that we call "tufte" -- named after https://github.com/edwardtufte/tufte-css */
/* For long prose, we prefer serifs and a spacious line height for easy reading. */
.tufte {
  font-family: Bitter, serif;
  font-size: 16px; }
  .tufte ul, .tufte ol, .tufte p, .tufte .note__content {
    line-height: 1.6em; }
  .tufte li {
    padding: 0.2em 0; }
    .tufte li p {
      margin-top: 0;
      margin-bottom: 0; }
    .tufte li ul, .tufte li ol {
      margin-top: 0.5em; }

/* Add some spacing between sections. */
.tufte section.level2 {
  padding: 10px 0; }

/* Links have the same color as the regular text, and we indicate that they're links using an underline. */
.tufte__link:link, .tufte__link:visited {
  color: inherit; }

.tufte__link:link {
  text-decoration: none;
  background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
  background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
  background-position: 0% 93%, 100% 93%, 0% 93%; }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .tufte__link:link {
      background-position-y: 87%, 87%, 93%; } }
  .tufte__link:link:link::selection, .tufte__link:link:link::-moz-selection {
    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
    background: #b4d5fe;
    /* todo - selected smart-underline text looks bad, this isn't working? */ }

/* We indicate that a link is "external" (that you're leaving our site) by adding an icon after it. */
.tufte a.external:after, .phrasebook a.external:after {
  font: normal normal normal 9px/1 FontAwesome;
  content: "\00a0\00a0\f08e";
  font-weight: bold; }

/* For code that is inline with the prose, we adjust the font size so it matches the serif face, and set some background color to make it more clear that it's code. */
.tufte p code, .tufte ul code, .tufte ol code, .tufte table code {
  font-size: 14px;
  border-radius: 2px;
  /* Apply the 'plain' class to a 'code' element to avoid getting the background color. */ }
  .tufte p code:not(.plain), .tufte ul code:not(.plain), .tufte ol code:not(.plain), .tufte table code:not(.plain) {
    background-color: #eaefe3; }

/* If code is inside a link, don't apply the usual background coloring. It doesn't play well with the underlining, and the underlining is sufficient to visually set it apart from the text anyway. */
.tufte a code:not(.plain) {
  background: none; }

.tufte table {
  border-collapse: collapse; }

/* Lists inside tables are more compact. */
.tufte table ul, .tufte table ol {
  line-height: 1.25em;
  padding: 0 0 0 1.5em;
  margin: 0.5em 0; }
  .tufte table ul li, .tufte table ol li {
    padding: 0; }

/* On small screens, all notes are marked with the same symbol. In this layout, there's no point in showing numbers, nor any reason to distinguish marked notes from unmarked notes. */
@media not all and (min-width: 760px) {
  .tufte--withNotes .note__label:before {
    content: "\2295"; } }

/* On big screens, we get fancier with the note labels. */
@media (min-width: 760px) {
  /* For marked notes, the numbering happens automatically via CSS. */
  body {
    counter-reset: note-counter; }
  /* Marked notes are the ones that have superscripted numbers in the text that refer to the note. */
  .tufte--withNotes .note--marked .note__label {
    counter-increment: note-counter; }
  .tufte--withNotes .note--marked .note__label:after {
    content: counter(note-counter);
    color: #333;
    font-weight: bold;
    font-size: 10px;
    font-family: Lato, sans-serif;
    position: relative;
    top: -0.4rem;
    vertical-align: baseline; }
  /* The note content also displays its number, so thus the number appears in two places, providing a visual link between the note content and the place in the text that refers to it. */
  .tufte--withNotes .note--marked .note__content:before {
    content: counter(note-counter) " ";
    color: #333;
    font-weight: bold;
    font-size: 10px;
    font-family: Lato, sans-serif;
    position: relative;
    top: -0.4rem;
    vertical-align: baseline; } }

/* Apply this mixin to things within a .tufte block that need to be exempt from the tufte width limitations. */
/* On big screens, we have two-column layout with paragraphs on the left and floating notes on the right. */
/* First we reduce the width of all the block elements, thus leaving a chunk of empty space on the right. We make an exception for anything that has the "wide" class, which we apply to display things that need more space to show, such as large code blocks. */
@media (min-width: 760px) {
  .tufte--withNotes {
    /* Use the fullWidth class to insert a chunk that is exempt from the whole margin-notes thing. */ }
    .tufte--withNotes p, .tufte--withNotes ul, .tufte--withNotes ol, .tufte--withNotes hr, .tufte--withNotes pre, .tufte--withNotes pre.sourceCode, .tufte--withNotes div.notWide {
      box-sizing: border-box;
      max-width: 60%; }
      .tufte--withNotes p.wide, .tufte--withNotes ul.wide, .tufte--withNotes ol.wide, .tufte--withNotes hr.wide, .tufte--withNotes pre.wide, .tufte--withNotes pre.sourceCode.wide, .tufte--withNotes div.notWide.wide {
        max-width: none;
        clear: both; } }
    @media print and (min-width: 760px) {
      .tufte--withNotes p, .tufte--withNotes ul, .tufte--withNotes ol, .tufte--withNotes hr, .tufte--withNotes pre, .tufte--withNotes pre.sourceCode, .tufte--withNotes div.notWide {
        max-width: none;
        clear: both; } }
@media (min-width: 760px) {
    .tufte--withNotes div.wide {
      clear: both; } }
    @media (min-width: 760px) and (min-width: 760px) {
      .tufte--withNotes div.wide p, .tufte--withNotes div.wide ul, .tufte--withNotes div.wide ol, .tufte--withNotes div.wide hr, .tufte--withNotes div.wide pre {
        max-width: none; }
      .tufte--withNotes div.wide table {
        width: auto; } }
@media (min-width: 760px) {
    .tufte--withNotes table {
      width: 60%; }
      .tufte--withNotes table.wide {
        width: auto; } }
    @media print and (min-width: 760px) {
      .tufte--withNotes table {
        width: auto; } }
@media (min-width: 760px) {
    .tufte--withNotes ul p, .tufte--withNotes ul ul, .tufte--withNotes ul ol, .tufte--withNotes ul pre.sourceCode, .tufte--withNotes ol p, .tufte--withNotes ol ul, .tufte--withNotes ol ol, .tufte--withNotes ol pre.sourceCode, .tufte--withNotes table p, .tufte--withNotes table ul, .tufte--withNotes table ol, .tufte--withNotes table pre.sourceCode {
      max-width: initial; }
    .tufte--withNotes ul table, .tufte--withNotes ol table, .tufte--withNotes table table {
      width: 100%; }
    .tufte--withNotes .fullWidth {
      border-width: 1px 0;
      border-style: solid;
      border-color: #e1d5a7;
      margin: 2em 0;
      padding: 2em 0; }
      .tufte--withNotes .fullWidth table {
        width: auto;
        margin-left: auto;
        margin-right: auto; }
      .tufte--withNotes .fullWidth p, .tufte--withNotes .fullWidth ul, .tufte--withNotes .fullWidth ol, .tufte--withNotes .fullWidth pre {
        max-width: initial; } }

/* Then we float all the note content to the right, to place the notes in that empty space. */
@media (min-width: 760px) {
  .tufte--withNotes .note__content {
    margin: 0 -60% 0 0;
    width: 50%;
    float: right;
    clear: right;
    /* Margin content needs to render *above* the main content. Usually this isn't relevant, because we try not to let main content and margin notes have any overlap. But there are circumstances in which some benign overlap occurs; in those cases, it is always an *empty* portion of the main content that is running into some *nonempty* portion of margin note, and thus the margin content needs to be on top so that its hyperlinks remain clickable. */
    z-index: 1; } }
  @media (min-width: 760px) and (min-width: 760px) {
    .tufte--withNotes .note__content p, .tufte--withNotes .note__content ul, .tufte--withNotes .note__content ol, .tufte--withNotes .note__content hr, .tufte--withNotes .note__content pre {
      max-width: none; }
    .tufte--withNotes .note__content table {
      width: auto; } }
/* On big screens, unmarked note labels are hidden (which is why they are called "unmarked"). */
@media (min-width: 760px) {
  .tufte--withNotes .note--unmarked .note__label {
    display: none; } }

/* When notes are displayed in the margin, they are slightly smaller than the main text. */
@media (min-width: 760px) {
  .tufte--withNotes .note__content {
    font-size: 14px; }
    .tufte--withNotes .note__content code {
      font-size: 12px; }
    .tufte--withNotes .note__content a.external:after {
      font-size: 9px/1; } }

/* Images in margin notes generally need to be scaled down to fit within the margin. */
@media (min-width: 760px) {
  .tufte--withNotes .note__content img {
    max-width: 100%; } }

/* When notes are displayed in the margin, they need some space added to the bottom so that two notes won't display too close together. */
@media (min-width: 760px) {
  .tufte--withNotes .note__content {
    margin-bottom: 20px; } }

/* On small screens, we hide the notes by default, and each reference to a note is a link (called 'margin-toggle') that you can click to make it appear. */
@media not all and (min-width: 760px) {
  .tufte--withNotes {
    /* While the box is unchecked, the corresponding note is hidden. */
    /* Float the note so it can appears between lines in a paragraph. */ }
    .tufte--withNotes .note__label {
      cursor: pointer;
      color: #518f51; }
    .tufte--withNotes .note__toggle:not(:checked) + .note__content {
      display: none; }
    .tufte--withNotes .note__content {
      display: inline-block;
      width: 100%;
      float: left;
      clear: both; }
    .tufte--withNotes .note__content {
      margin: 16px 0;
      padding: 9px 13px;
      box-sizing: border-box;
      border-top: 1px solid #518f51;
      border-bottom: 1px solid #518f51; } }

/* The checkbox that the margin-toggle mechanism uses is never visible. */
.tufte--withNotes .note__toggle {
  display: none; }

/* Don't show the notes at all in print or screen reader form. */
@media not screen {
  .tufte--withNotes .note {
    display: none; } }

/* Videos and images have a bit of shadow around them - this is set them apart from the text content in a way that is not so heavyweight and distracting as a border. If an image has a transparent background, then apply the 'transparent' class to it, and the shadow will not be applied. */
.tufte video, .tufte__frame {
  box-shadow: 0 0 25px -5px black; }

/* The typical way to display media in a Tufte environment is to have it fill the left column. */
video.tufte__figure {
  width: 100%;
  margin: 2em 0; }

img.tufte__figure {
  max-width: 100%;
  margin: 1em 0; }

/* Blockquotes are displayed very simply, with a little padding and a thin line on the left. Code inside a blockquote doesn't have a background, because the double decoration is excessive. */
.tufte blockquote {
  border-left: 1px solid black;
  padding: 0 1em;
  margin: 0.5em 1em; }
  .tufte blockquote pre.sourceCode {
    background: none; }

/* A horizontal rule is displayed as a line of three large dots. */
.tufte hr {
  opacity: 0.2;
  text-align: center;
  margin: 2em 0;
  letter-spacing: 1em;
  border: 0; }
  .tufte hr:after {
    content: '\25cf\25cf\25cf'; }

table.alignLeft th, table.alignLeft td {
  text-align: left; }

table.alignRight th, table.alignRight td {
  text-align: right; }

table.alignCenter th, table.alignCenter td {
  text-align: center; }

table.alignTop th, table.alignTop td {
  vertical-align: top; }

table.spacious th, table.spacious td {
  padding: 0.2em 0.6em;
  line-height: 1.5em; }

table.underlineHead {
  border-collapse: collapse; }
  table.underlineHead thead {
    border-bottom: 1px solid black; }

table.axisLines tr:first-child th, table.axisLines tr:first-child td {
  border-bottom: 1px solid black; }

table.axisLines th:first-child, table.axisLines td:first-child {
  border-right: 1px solid black; }

/* I'm not sure why this is necessary, but otherwise bad things happen on small screens when you expand a footnote that is immediately followed by a code block. */
@media not all and (min-width: 760px) {
  .tufte pre.sourceCode {
    clear: both; } }

.tufte .annotatedCode {
  margin-top: 2em;
  margin-bottom: 2em; }
  @media (min-width: 760px) {
    .tufte .annotatedCode p, .tufte .annotatedCode ul, .tufte .annotatedCode ol, .tufte .annotatedCode hr, .tufte .annotatedCode pre {
      max-width: none; }
    .tufte .annotatedCode table {
      width: auto; } }
/* The page title is in an <h1> element. The size and spacing differ
a bit based on screen size. */
html.content h1 {
  text-align: center; }
  @media (min-width: 760px) {
    html.content h1 {
      margin: 100px 0 50px;
      font-size: 40px; } }
  @media not all and (min-width: 760px) {
    html.content h1 {
      margin: 50px 0 25px;
      font-size: 36px; } }
html.content .byline {
  text-align: center;
  color: gray; }
  @media (min-width: 760px) {
    html.content .byline {
      margin-bottom: 3em; } }
  @media not all and (min-width: 760px) {
    html.content .byline {
      margin-bottom: 2em; } }
/* Previous/next buttons */
@media print {
  .seriesLinks {
    display: none; } }

.seriesLinks {
  margin-top: -100px;
  padding-left: 20px;
  padding-right: 20px; }

.seriesLinks--both {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between; }

.seriesLinks--previousOnly {
  text-align: left; }

.seriesLinks--nextOnly {
  text-align: right; }

.seriesLink {
  display: flex;
  flex-direction: column; }

.seriesLink--previous {
  align-items: flex-start; }

.seriesLink--next {
  align-items: flex-end; }

.seriesLink--previous .seriesLink__title {
  padding-left: 0.5em; }

.seriesLink--next .seriesLink__title {
  padding-right: 0.5em; }

.seriesLink__button {
  width: 3em;
  height: 3em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 1.5em;
  font-weight: bold;
  color: #aaa;
  margin-bottom: 0.5em; }

.seriesLink__button i {
  font-size: 24pt;
  position: relative;
  top: 0.05em; }

.seriesLink__button:hover, .seriesLink__button:focus {
  background: #e06d06;
  color: white; }

.seriesLink--previous .seriesLink__button i {
  right: 0.08em; }

.seriesLink--next .seriesLink__button i {
  left: 0.08em; }

.seriesLink__title {
  color: #e06d06;
  font-weight: bold; }

.seriesLink__button:not(:hover):not(:focus) + .seriesLink__title {
  visibility: hidden; }

/* These buttons only fit on big screens, and they rely on hover behavior so they don't really make sense on touchscreens. */
@media not all and (min-width: 760px) {
  .seriesLinks {
    display: none; } }

@media (hover: none) {
  .seriesLinks {
    display: none; } }

/* Some pages have an "infobox" containing an at-a-glance summary of what the page is about. It may contain a table of contents, a tag list, links to related pages, etc. */
/* Underlines in the infobox would be too distracting (especially in the table of contents, which consists entirely of links), so we indicate links with color instead. */
.tufte .infobox a:link {
  text-shadow: none;
  background: none; }

.tufte .infobox a {
  color: #2c4e2c; }

.tufte .infobox a:hover {
  color: #518f51; }

@media print {
  .tufte .infobox {
    display: none; } }

/* On big screens, the infobox goes into the Tufte margin. There's some spacing at its bottom so that it doesn't directly abut any notes. */
@media (min-width: 760px) {
  .infobox {
    width: 32%;
    float: right;
    clear: right;
    /* Margin content needs to render *above* the main content. Usually this isn't relevant, because we try not to let main content and margin notes have any overlap. But there are circumstances in which some benign overlap occurs; in those cases, it is always an *empty* portion of the main content that is running into some *nonempty* portion of margin note, and thus the margin content needs to be on top so that its hyperlinks remain clickable. */
    z-index: 1;
    margin-bottom: 2em; } }
  @media (min-width: 760px) and (min-width: 760px) {
    .infobox p, .infobox ul, .infobox ol, .infobox hr, .infobox pre {
      max-width: none; }
    .infobox table {
      width: auto; } }
/* The infobox consists of a list of sections. */
/* There is some spacing between the sections. */
.infobox__section:not(:last-child) {
  margin-bottom: 2em; }

/* Each section has a title. */
.infobox__section__title {
  font-weight: bold;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 20px; }

/* One of the things in an infobox is the table of contents. We show it as a numbered list because it looks nice and helps communicate what it is. */
.infobox__section--toc ul, .infobox__section--lessonList--numbered ul {
  list-style-type: decimal; }

.infobox__section--toc ul ul, .infobox__section--lessonList--numbered ul ul {
  list-style-type: none;
  padding-left: 0.4em;
  font-size: 10pt;
  list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gwFFBMiytYGwAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAATSURBVAjXYzQ2Nv7PgAaYGOgEAMVwAZzYyAedAAAAAElFTkSuQmCC); }

.infobox__section--toc ul, .infobox__section--lessonList--numbered ul {
  margin: 0 0 0 0.5em;
  padding: 0 0 0 1em; }

.infobox__section--toc li, .infobox__section--lessonList--numbered li {
  padding: 0 0 0 0.4em;
  margin: 8px 0;
  color: #333; }

.infobox__section--lessonList--plain ul {
  list-style-type: none; }

.infobox__section--lessonList--plain ul, .infobox__section--lessonList--plain li {
  margin: 0;
  padding: 0; }

.infobox__section--lessonList--plain li {
  margin-top: 0.5em; }

.infobox__section--lessonList--plain ul {
  margin-top: 1em; }

.infobox__section--lessonList--plain ul ul {
  margin-top: 0; }

.infobox__section--lessonList hr {
  height: 1px;
  background: black;
  margin: 0.2em 0; }
  .infobox__section--lessonList hr:after {
    content: none; }

.infobox__section--video ul {
  margin: 0;
  padding: 0 0 0 1em;
  list-style-type: none; }

.infobox__section--video li {
  padding: 0;
  margin: 8px 0; }

/* One of the things that can go into an infobox is a tag list, which is a collection of keywords summarizing topics covered in the article. This is a <ul> element, so note that we override some of the default list styling here. */
.infobox .tagList {
  margin: 0.2em 0 0 1em;
  padding: 0; }

.infobox .tagList__tag {
  display: inline-block; }
  .infobox .tagList__tag a:link, .infobox .tagList__tag a:visited {
    display: inline-block;
    color: white;
    padding: 0.2em 0.4em;
    margin: 0.2em 0.2em;
    font-size: 15px;
    border-radius: 5px;
    background-color: #b181d1; }
    .infobox .tagList__tag a:link:hover, .infobox .tagList__tag a:visited:hover {
      background-color: #9a5cc3; }
    .infobox .tagList__tag a:link, .infobox .tagList__tag a:link code, .infobox .tagList__tag a:visited, .infobox .tagList__tag a:visited code {
      font-family: Bitter, serif; }

.infobox__section--implicationGraph text {
  text-anchor: middle; }

.infobox__section--implicationGraph line {
  shape-rendering: crispEdges;
  stroke: black; }

.infobox ul, .infobox ol {
  line-height: initial; }

.infobox li {
  padding: 0; }

/* For paid content, there is no nag footer, so there needs to be some padding at the bottom of the main area to separate the content from the page footer. */
html.content.paid .main {
  padding-bottom: 35px; }

/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* The "course nav" div mostly just exists because we need a wrapper div to center the button it contains. */
.course-nav {
  text-align: center;
  margin-top: 2em;
  font-family: Lato, sans-serif; }
  .course-nav a:link {
    text-shadow: none;
    background: none; }

/* The "next" button in a course nav is a big bright link to the next page in a series. */
.course-nav a.next {
  color: white;
  padding: 8px 30px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  display: inline-block;
  background-color: #e06d06; }
  .course-nav a.next:hover {
    background-color: #f98720; }

/* The footer goes at the bottom of every page. */
.footer {
  font-size: 18px; }

.footer .container {
  padding: 35px 0; }

/* It has light text on a dark background. */
.footer {
  background-color: #518f51; }

.footer, .footer a {
  color: white; }

.footer a:hover {
  color: #faa152; }

/* On short pages and tall screens, the footer may not be large enough to extend all the way to the bottom of the page, leaving an unsightly blank area below it. We can fix this by making the whole body a flex area. */
@media screen {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; } }

.main {
  flex-grow: 1; }

/* No floating elements from the main page content are allowed to descend into the footer. */
.footer {
  clear: both; }

/* The first thing in the footer is some nav links. The links are in a <ul> element, so we need to remove the default list styling. */
.footer__nav {
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 4ex; }

.footer__nav li {
  display: inline-block; }

/* There is a dot between each of the nav items to visually separate them. */
.footer__nav li:not(:last-child):after {
  content: " \00b7";
  margin: 0 0.5em; }

/* After the nav, we have the social links. These too are in a <ul>. */
.footer__socialLinks {
  margin: 20px 0;
  padding: 0;
  text-align: center; }

.footer__socialLinks li {
  display: inline-block;
  margin: 0 1em;
  font-size: 28px; }

/* Finally, the copyright. */
.footer__copyright {
  text-align: center; }

@media (min-width: 760px) {
  .footer__nav,
  .footer__socialLinks,
  .footer__copyright {
    box-sizing: border-box;
    max-width: 60%; }
  .footer .container {
    background: right 10% bottom no-repeat url("../images/mountain.svg");
    position: relative; } }

@media not all and (min-width: 760px) {
  .footer__montana {
    display: none; } }

@media (min-width: 760px) {
  .footer__montana {
    padding-top: 1em;
    position: absolute;
    right: 12%;
    top: 20px;
    color: #427642;
    font-weight: bold;
    font-size: 15pt;
    font-family: Bitter, serif; } }

@media print {
  .footer {
    display: none; } }

/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* Highly general things */
/* We start with some basic very broadly-applicable rules */
/* Remove any spacing that the browser puts around the page, so that we can draw things that extend all the way to the edge of the screen. */
html, body {
  margin: 0;
  padding: 0; }

/* This ensures that a horizontal scrollbar never appears on the page, because it looks really bad. */
html, body {
  overflow-x: hidden; }

/* All pages use our off-white color for the background. */
body {
  background-color: #fcf9f4; }

/* Give the entire body a default font size and family to make sure the font always appears consistent across browsers even if we forget to set it somewhere. */
body {
  font-size: 16px;
  font-family: Lato, sans-serif; }

/* Disable auto-enlargement of small text in mobile Safari
https://blog.55minutes.com/2012/04/iphone-text-resizing/ */
body {
  -webkit-text-size-adjust: 100%; }

/* Code is shown in a monospace font, of course. */
code {
  font-family: "Fira Mono", monospace; }

/* If a code block has the "wrap" attribute, then its lines are allowed to wrap. */
.wrap code {
  white-space: pre-wrap; }

/* Whitespace in code is typically important. For example, if we write `"  "` in markdown which renders to <code>"  "</code> in HTML, that denotes a string literal consisting of two spaces, and it does not mean the same thing if we allow the browser to collapse the two spaces into one. Furthermore, we would not want such code to be line wrapped, because that also has the possibility of obscuring significant whitespace, and also because wrapped expressions become difficult to read. */
code {
  white-space: pre; }

/* Buttons and form inputs usually look best in a sans-serif font */
button, input {
  font-family: Lato, sans-serif; }

/* We have a particular font that we apply to all the "header" elements */
h1, h2, h3, h4, h5, h6 {
  font-family: "Fira Sans Condensed", sans-serif; }

/* *Strong* text is urgent or serious, and conventionally displayed in bold. */
strong {
  font-weight: bold; }

/* /Emphatic/ text is conventionally shown in italics. */
em {
  font-style: italic; }

/* By default, superscripts and subscripts can affect line height, leading to a visually unappealing inconsistency in the line heights within a paragraph. This is a fix for that problem. */
sup, sub {
  line-height: 1; }

sup {
  vertical-align: text-top; }

sub {
  vertical-align: text-bottom; }

/* Browsers underline links by default; we disable this. In some cases we may underline links, but we will turn this on on a case-by-case basis. */
a {
  text-decoration: none; }

/* Sometimes we indicate links using a green color (but we don't set this as the default, we just provide this mixin and enable it where appropriate.) */
/* If you want darker links, use this alternate form. */
/* Show a bright contrasting outline around whatever's in focus to make it easy to see. */
:focus {
  outline: 2px solid orange; }

/* On large screens, we constrain the size of the main page content. In most cases, this is done by wrapping content in a <div class="container"> element, as is the conventional approach (popularized by Bootstrap). We also include a little bit of left and right padding in container so that on smaller screens the content will not come too close to the edge of the screen. */
.container {
  max-width: 1040px;
  padding-left: 20px;
  padding-right: 20px;
  /* Setting left and right margins to 'auto' centers the content on the page. */
  margin-left: auto;
  margin-right: auto;
  display: block; }

/* Sometimes we customize the selection background color. We don't do this everywhere, but the color is defined here for the places that do. */
/* The home page has some introductory content in the art. The content of the intro differs depending on whether the user is a paid subscriber or not. */
html.home .intro {
  text-align: center; }

/* Free mode, on large screens: */
@media (min-width: 760px) {
  html.home.free .intro .container > div:nth-of-type(1) {
    color: rgba(255, 255, 255, 0.7);
    font-variant: small-caps;
    padding-top: 30px;
    padding-bottom: 35px;
    font-size: 44px; }
  html.home.free .intro .container > div:nth-of-type(2) {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 36px;
    padding-bottom: 28px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7); } }

/* Free mode, on small screens: */
@media not all and (min-width: 760px) {
  html.home.free .intro .container > div:nth-of-type(1) {
    color: rgba(255, 255, 255, 0.7);
    padding-top: 32px;
    padding-bottom: 27px;
    font-size: 32px; }
  html.home.free .intro .container > div:nth-of-type(2) {
    padding-top: 40px;
    padding-bottom: 32px;
    font-size: 18px;
    color: white; } }

/* Paid mode, on large screens: */
@media (min-width: 760px) {
  html.home.paid .intro .container > div:nth-of-type(1) {
    color: white;
    font-variant: small-caps;
    padding-top: 32px;
    font-size: 44px; }
  html.home.paid .intro .container > div:nth-of-type(2) {
    color: white;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 32px;
    font-size: 20px; } }

/* Paid mode, on small screens: */
@media not all and (min-width: 760px) {
  html.home.paid .intro .container > div:nth-of-type(1) {
    color: rgba(255, 255, 255, 0.7);
    padding-top: 24px;
    font-size: 32px; }
  html.home.paid .intro .container > div:nth-of-type(2) {
    padding-top: 40px;
    padding-bottom: 32px;
    font-size: 18px;
    color: white; } }

/* If you're not a subscriber, you see a button that nags you to sign up. */
html.home.free .intro .subscribeButton {
  color: white;
  border: 2px solid white;
  background-color: #b75472;
  border-radius: 3px;
  font-size: 18px;
  padding: 0.4em 1em;
  min-width: 162px; }
  html.home.free .intro .subscribeButton:hover {
    background-color: #de6086; }

/* There's a light-colored shadow on the button, which makes the button appear as if it is backlit by something emitting a cool glow. The size of the shadow differs slightly between large and small screens. */
@media (min-width: 760px) {
  html.home.free .intro .subscribeButton {
    box-shadow: 0 0 43px 16px rgba(255, 255, 255, 0.2); }
    html.home.free .intro .subscribeButton:hover {
      box-shadow: 0 0 43px 16px rgba(255, 255, 255, 0.25); } }

@media not all and (min-width: 760px) {
  html.home.free .intro .subscribeButton {
    box-shadow: 0 0 43px 8px rgba(255, 255, 255, 0.2); }
    html.home.free .intro .subscribeButton:hover {
      box-shadow: 0 0 43px 8px rgba(255, 255, 255, 0.25); } }

/* The home page content. */
.homeContent li:not(:last-child) {
  margin-bottom: 0.2em; }

@media (min-width: 760px) {
  .homeContent {
    margin-top: 3em;
    display: grid;
    grid-gap: 1.5em 3em;
    grid-template-areas: "intro      nav" "intro      news" "highlights highlights"; }
  .homeContent__intro {
    grid-area: intro;
    text-align: justify; }
  .homeContent__nav {
    grid-area: nav; }
  .homeContent__news {
    grid-area: news;
    text-align: justify; }
  .homeContent__highlights {
    grid-area: highlights; } }

@media not all and (min-width: 760px) {
  .homeContent > * {
    margin-top: 2em; } }

/* At the bottom of the news section, there is a link to the news page. */
.homeContent__news .news__links {
  text-align: center;
  margin-top: 1em; }
  .homeContent__news .news__links a {
    color: #2c4e2c; }
  .homeContent__news .news__links a:hover {
    color: #518f51; }
  .homeContent__news .news__links a:link {
    text-decoration: none;
    background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#a0bca0, #a0bca0);
    background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#a0bca0, #a0bca0);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
    background-position: 0% 98%, 100% 98%, 0% 98%; }
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      .homeContent__news .news__links a:link {
        background-position-y: 87%, 87%, 98%; } }
    .homeContent__news .news__links a:link:link::selection, .homeContent__news .news__links a:link:link::-moz-selection {
      text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
      background: #b4d5fe;
      /* todo - selected smart-underline text looks bad, this isn't working? */ }

/* Add some padding above the footer. */
html.home .main {
  padding-bottom: 50px; }

.homeContent__title {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 150%;
  margin: 0 0 1em;
  text-align: center;
  color: #b75472;
  border-bottom: 1px solid #b75472;
  padding-bottom: 0.1em; }

/* A pitch about why we're great */
.homeContent__intro {
  color: black; }
  .homeContent__intro a {
    color: black; }
    .homeContent__intro a:link {
      text-decoration: none;
      background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#666666, #666666);
      background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#666666, #666666);
      -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      background-repeat: no-repeat, no-repeat, repeat-x;
      text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
      background-position: 0% 98%, 100% 98%, 0% 98%; }
      @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .homeContent__intro a:link {
          background-position-y: 87%, 87%, 98%; } }
      .homeContent__intro a:link:link::selection, .homeContent__intro a:link:link::-moz-selection {
        text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
        background: #b4d5fe;
        /* todo - selected smart-underline text looks bad, this isn't working? */ }

/* Quick links to places to start exploring from the home page */
.homeContent__nav li:not(:last-child) {
  margin-bottom: 0.5em; }

.homeContent__nav a {
  color: #518f51; }

.homeContent__nav a:hover {
  color: #355e35; }

.homeContent__nav a:link {
  text-decoration: none;
  background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#a0bca0, #a0bca0);
  background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#a0bca0, #a0bca0);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
  background-position: 0% 98%, 100% 98%, 0% 98%; }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .homeContent__nav a:link {
      background-position-y: 87%, 87%, 98%; } }
  .homeContent__nav a:link:link::selection, .homeContent__nav a:link:link::-moz-selection {
    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
    background: #b4d5fe;
    /* todo - selected smart-underline text looks bad, this isn't working? */ }

/* The news feed on the home page */
.homeContent__news {
  color: black; }
  .homeContent__news .news__post {
    line-height: 1.35; }
  .homeContent__news .news__post:not(:last-child) {
    margin-bottom: 0.5em; }
  .homeContent__news .news__post__date {
    color: #518f51;
    display: inline; }
    .homeContent__news .news__post__date:before {
      content: ' ('; }
    .homeContent__news .news__post__date:after {
      content: ') '; }
  .homeContent__news .news__post__title {
    font-weight: bold;
    display: inline; }
    .homeContent__news .news__post__title a {
      color: black; }
      .homeContent__news .news__post__title a:link {
        text-decoration: none;
        background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(black, black);
        background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(black, black);
        -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        background-repeat: no-repeat, no-repeat, repeat-x;
        text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
        background-position: 0% 98%, 100% 98%, 0% 98%; }
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
          .homeContent__news .news__post__title a:link {
            background-position-y: 87%, 87%, 98%; } }
        .homeContent__news .news__post__title a:link:link::selection, .homeContent__news .news__post__title a:link:link::-moz-selection {
          text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
          background: #b4d5fe;
          /* todo - selected smart-underline text looks bad, this isn't working? */ }
  .homeContent__news .news__post__abstract {
    display: inline; }
    .homeContent__news .news__post__abstract a {
      color: black; }
      .homeContent__news .news__post__abstract a:link {
        text-decoration: none;
        background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#666666, #666666);
        background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#666666, #666666);
        -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        background-repeat: no-repeat, no-repeat, repeat-x;
        text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
        background-position: 0% 98%, 100% 98%, 0% 98%; }
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
          .homeContent__news .news__post__abstract a:link {
            background-position-y: 87%, 87%, 98%; } }
        .homeContent__news .news__post__abstract a:link:link::selection, .homeContent__news .news__post__abstract a:link:link::-moz-selection {
          text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
          background: #b4d5fe;
          /* todo - selected smart-underline text looks bad, this isn't working? */ }

.homeContent__highlights {
  line-height: 1.5;
  text-align: justify; }
  .homeContent__highlights a {
    color: #2c4e2c; }
  .homeContent__highlights a:hover {
    color: #518f51; }
  @media (min-width: 760px) {
    .homeContent__highlights .praise {
      display: grid;
      grid-column-gap: 2em;
      grid-row-gap: 1.5em;
      grid-template-columns: auto auto; }
    .homeContent__highlights .praise__item:nth-child(2) {
      grid-column: 1 / span 2;
      grid-row: 1;
      text-align: center; }
    .homeContent__highlights .praise__item:nth-child(1) {
      grid-column: 1;
      grid-row: 2; }
    .homeContent__highlights .praise__item:nth-child(4) {
      grid-column: 2;
      grid-row: 2; } }
  @media not all and (min-width: 760px) {
    .homeContent__highlights .praise {
      display: grid;
      grid-template-columns: auto;
      grid-row-gap: 1em; } }
html.index .indexContent, html.indexEntry .indexContent {
  margin-left: auto;
  margin-right: auto;
  font-family: Bitter, serif; }
  html.index .indexContent h1, html.indexEntry .indexContent h1 {
    border-bottom: 1px solid black;
    font-size: 32px;
    font-weight: bold; }
  html.index .indexContent h2, html.indexEntry .indexContent h2 {
    font-size: inherit;
    font-weight: bold;
    margin-top: 1em; }
  html.index .indexContent section.level2, html.indexEntry .indexContent section.level2 {
    padding-left: 1.5em; }
  html.index .indexContent a, html.indexEntry .indexContent a {
    color: #2c4e2c; }
  html.index .indexContent a:hover, html.indexEntry .indexContent a:hover {
    color: #518f51; }
  html.index .indexContent ul, html.indexEntry .indexContent ul {
    list-style: none; }
  html.index .indexContent li, html.indexEntry .indexContent li {
    margin-bottom: 0.9em;
    line-height: 1.2; }

html.index .intro {
  color: white;
  padding: 75px 0 25px;
  font-size: 40px;
  text-align: center;
  font-family: Bitter, serif; }

html.index .indexContent {
  margin: 75px auto; }

@media (min-width: 760px) {
  html.index .indexContent {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto; }
    html.index .indexContent ul {
      column-width: 12em; }
    html.index .indexContent code {
      white-space: normal; } }

@media not all and (min-width: 760px) {
  html.index .indexContent {
    padding-left: 20px;
    padding-right: 20px; } }

html.indexEntry .indexContent h1 {
  margin-top: 100px; }

html.indexEntry .main {
  padding-bottom: 100px; }

@media (min-width: 760px) {
  html.indexEntry .indexContent {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto; } }

@media not all and (min-width: 760px) {
  html.indexEntry .indexContent {
    padding-left: 20px;
    padding-right: 20px; } }

/* A page that shows up when you try to access a page that requires a user login but you're not logged in. */
@media (min-width: 760px) {
  html.loginWall .main {
    padding-bottom: 100px; }
  .loginWallContent {
    text-align: center;
    margin-top: 100px; }
  .loginWallContent__links {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto; }
  .loginWallContent__links {
    margin-top: 25px;
    padding-top: 25px; } }

@media not all and (min-width: 760px) {
  html.loginWall .main {
    padding-bottom: 25px; }
  .loginWallContent {
    text-align: center;
    margin-top: 50px; }
  .loginWallContent__links {
    margin-top: 35px;
    padding-top: 35px; } }

.loginWallContent {
  text-align: center; }

.loginWallContent__links {
  border-top: 1px solid gray; }
  .loginWallContent__links p {
    margin-top: 0;
    margin-bottom: 15px; }

/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* The "nag footer" shows up after the content if you aren't subscriber. It gives a quick pitch for why you should subscribe, with a button to take you to the subscription form. */
.nagFooter {
  clear: both; }

html.tear .nagFooter {
  text-align: center;
  color: white;
  /* The background uses gradients to construct a sort of graph paper pattern. */
  background-color: #2a2a2a;
  background-image: linear-gradient(#3a3a3a 2px, transparent 2px), linear-gradient(90deg, #3a3a3a 2px, transparent 2px), linear-gradient(#333333 1px, transparent 1px), linear-gradient(90deg, #333333 1px, transparent 1px);
  background-size: 100px 100px , 100px 100px , 20px 20px , 20px 20px;
  background-position: -2px -2px , -2px -2px , -1px -1px , -1px -1px; }
  @media not all and (min-width: 760px) {
    html.tear .nagFooter {
      padding: 65px 0 45px; } }
  @media (min-width: 760px) {
    html.tear .nagFooter {
      padding: 75px 0 75px; } }
  html.tear .nagFooter p {
    font-size: 18px;
    line-height: 30px;
    max-width: 535px;
    margin: 0 auto 40px; }

html:not(.tear) .nagFooter {
  padding: 0 20px;
  font-family: Bitter, serif;
  font-size: 16px;
  line-height: 1.5em; }
  @media not all and (min-width: 760px) {
    html:not(.tear) .nagFooter {
      margin: 50px 0 25px; } }
  @media (min-width: 760px) {
    html:not(.tear) .nagFooter {
      margin: 75px 0 25px; } }
  html:not(.tear) .nagFooter a:link, html:not(.tear) .nagFooter a:visited {
    color: inherit; }
  html:not(.tear) .nagFooter a:link {
    text-decoration: none;
    background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
    background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
    background-position: 0% 93%, 100% 93%, 0% 93%; }
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      html:not(.tear) .nagFooter a:link {
        background-position-y: 87%, 87%, 93%; } }
    html:not(.tear) .nagFooter a:link:link::selection, html:not(.tear) .nagFooter a:link:link::-moz-selection {
      text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
      background: #b4d5fe;
      /* todo - selected smart-underline text looks bad, this isn't working? */ }
  html:not(.tear) .nagFooter p {
    margin: 0 auto;
    max-width: 450px;
    text-align: center; }
  html:not(.tear) .nagFooter .fleuron {
    height: 30px;
    margin-bottom: 10px; }

.nagFooter__subscribeButton {
  color: white;
  border-radius: 5px;
  cursor: pointer;
  padding: 6px 18px;
  font-size: 18px;
  display: inline-block;
  border: 2px solid white;
  min-width: 162px;
  /* The button background brightens a bit when you hover over it. */
  background-color: #b75472;
  /* The button has a glow which grows a bit when you hover over it. */
  box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.2); }
  .nagFooter__subscribeButton:hover {
    background-color: #de6086; }
  .nagFooter__subscribeButton:hover {
    box-shadow: 0 0 35px 0 rgba(255, 255, 255, 0.25); }

/* On many pages, we show only the leading bit of content to non-subscribers. We say these pages have a "tear" - as if the content were a sheet of paper where the bottom has been torn off, which we indicate visually with a sort of jagged edge at the top of the nag footer. */
html.tear .nagFooter {
  position: relative; }
  html.tear .nagFooter::before {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 15px;
    content: ' ';
    background: url('data:image/svg+xml,<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,100 200,0" fill="rgb(252,249,244)" /></svg>') top/1em auto repeat-x; }

/* By adding an inset shadow to the nag footer, we can make it appear as if the torn page above is casting a shadow onto the nag footer, reinforcing the visual metaphor. */
html.tear .nagFooter {
  box-shadow: inset 0px 40px 70px black; }
  @media (min-width: 760px) {
    html.tear .nagFooter {
      box-shadow: inset 0px 40px 240px black; } }
/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* The news index links to all the news posts. */
html.newsIndex {
  /* The page title goes into the intro block to make this page look special. */ }
  html.newsIndex .intro {
    text-align: center;
    color: white;
    padding-top: 60px;
    padding-bottom: 70px;
    font-size: 50px;
    font-family: Bitter, serif;
    opacity: 0.8;
    word-spacing: 0.2em; }
  html.newsIndex .news {
    padding-top: 38px; }
  html.newsIndex .feedLinks {
    text-align: center;
    margin: 4em 0; }
    html.newsIndex .feedLinks a {
      color: #518f51; }
    html.newsIndex .feedLinks a:hover {
      color: #355e35; }
  html.newsIndex .news__post__abstract {
    font-family: Bitter, serif;
    line-height: 1.5em; }
  html.newsIndex .news__post__title {
    display: inline;
    color: #518f51; }
  html.newsIndex .news__post__title a {
    color: #518f51; }
  html.newsIndex .news__post__title a:hover {
    color: #355e35; }
  html.newsIndex .news__post__title a:link {
    text-decoration: none;
    background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#a0bca0, #a0bca0);
    background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#a0bca0, #a0bca0);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
    background-position: 0% 98%, 100% 98%, 0% 98%; }
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      html.newsIndex .news__post__title a:link {
        background-position-y: 87%, 87%, 98%; } }
    html.newsIndex .news__post__title a:link:link::selection, html.newsIndex .news__post__title a:link:link::-moz-selection {
      text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
      background: #b4d5fe;
      /* todo - selected smart-underline text looks bad, this isn't working? */ }
  html.newsIndex .news__post__abstract a:link, html.newsIndex .news__post__abstract a:visited {
    color: inherit; }
  html.newsIndex .news__post__abstract a:link {
    text-decoration: none;
    background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#996, #996);
    background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#996, #996);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
    background-position: 0% 93%, 100% 93%, 0% 93%; }
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      html.newsIndex .news__post__abstract a:link {
        background-position-y: 87%, 87%, 93%; } }
    html.newsIndex .news__post__abstract a:link:link::selection, html.newsIndex .news__post__abstract a:link:link::-moz-selection {
      text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
      background: #b4d5fe;
      /* todo - selected smart-underline text looks bad, this isn't working? */ }
  @media (min-width: 760px) {
    html.newsIndex {
      /* Add some spacing between the news posts in the feed. */
      /* Constrain the width of the posts, and center them horizontally. */
      /* Float the date to the left, and give it a fixed width so that all the titles will line up with each other. */ }
      html.newsIndex .news__post {
        margin-bottom: 1.5em; }
      html.newsIndex .news__post {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto; }
      html.newsIndex .news__post__date {
        display: inline-block;
        color: #333;
        float: left;
        width: 7em; }
      html.newsIndex .news__post__title {
        font-weight: bold; }
      html.newsIndex .news__post__abstract {
        margin-left: 7em;
        margin-top: 0.5em;
        text-align: justify; } }
  @media not all and (min-width: 760px) {
    html.newsIndex {
      /* Add some spacing between the news posts in the feed. */
      /* Constrain the width of the posts, and center them horizontally. */ }
      html.newsIndex .news__post {
        margin-bottom: 2em; }
      html.newsIndex .news__post {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto; }
      html.newsIndex .news__post__date {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        color: #660; } }
html.news h1 {
  text-align: center; }

html.news .byline {
  text-align: center;
  color: gray; }

@media (min-width: 760px) {
  html.news h1 {
    margin-top: 3em;
    margin-bottom: 0.5em; }
  html.news .byline {
    margin-bottom: 3em; }
  html.news .main {
    padding-bottom: 4em; } }

@media not all and (min-width: 760px) {
  html.news h1 {
    margin-top: 2em;
    margin-bottom: 0.5em; }
  html.news .byline {
    margin-bottom: 2em; }
  html.news .main {
    padding-bottom: 1em; } }

/* 404 page */
html.notFound h1 {
  text-align: center;
  margin-top: 2em; }

html.notFound .tip {
  max-width: 500px;
  margin: 4em auto; }

html.org h1 {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 1em; }

html.org .summary {
  text-align: center; }

html.orgJoin h1, html.orgJoin .instructions, html.orgJoin .links {
  text-align: center; }

html.orgJoin .form__buttonGroup {
  text-align: center; }

html.orgJoin .form__button {
  background-color: #e06d06;
  color: white;
  border-width: 1px;
  border-radius: 5px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 16px; }

html.orgJoin .loginLinks {
  text-align: center;
  margin-top: 2em; }
  html.orgJoin .loginLinks a {
    color: #518f51; }
  html.orgJoin .loginLinks a:hover {
    color: #355e35; }

@media (min-width: 760px) {
  html.orgJoin h1 {
    margin-top: 3em;
    margin-bottom: 2em; }
  html.orgJoin .form__buttonGroup {
    margin-top: 2em; }
  html.orgJoin .main {
    padding-bottom: 2em; } }

@media not all and (min-width: 760px) {
  html.orgJoin h1 {
    margin-top: 3em;
    margin-bottom: 1em; }
  html.orgJoin .form__buttonGroup {
    margin-top: 2em; }
  html.orgJoin .main {
    padding-bottom: 2em; } }

html.orgRoster h1 {
  text-align: center;
  margin-top: 2em; }

html.orgRoster table.orgRoster {
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
  min-width: 80%;
  margin-bottom: 1em; }
  html.orgRoster table.orgRoster th {
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #333;
    height: 2.5em; }
  html.orgRoster table.orgRoster td {
    height: 2.5em; }
  html.orgRoster table.orgRoster tr > * {
    padding-left: 1em;
    padding-right: 1em; }

html.orgRoster table.orgRoster th:last-child, html.orgRoster .orgRoster__member td:last-child {
  text-align: right; }

html.orgRoster .invite__popupContainer {
  display: none; }

html.orgRoster .invite__url {
  width: 25em; }

html.orgRoster .invite__button, html.orgRoster .orgRoster__addButton {
  color: white;
  background-color: #518f51;
  border-radius: 5px;
  border: 2px solid white;
  padding: 0.4em 1em;
  cursor: pointer; }
  html.orgRoster .invite__button:hover, html.orgRoster .orgRoster__addButton:hover {
    background-color: #69aa69; }

html.orgRoster .invite__button__arrow {
  border: 4px solid transparent;
  border-top-color: white;
  border-bottom-width: 0;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  height: 0;
  width: 0;
  content: ""; }

html.orgRoster .invite__popupContainer {
  position: relative; }

html.orgRoster .invite__popup {
  position: absolute;
  right: 0;
  top: 0.5em;
  text-align: left;
  border: 5px solid #518f51;
  border-radius: 5px;
  padding: 1em;
  background: #518f51;
  color: white;
  box-shadow: 3px 3px 4px 4px rgba(0, 0, 0, 0.2); }

html.orgRoster .invite__url {
  padding: 0.4em 0.6em; }

html.orgRoster .invite__popup p {
  padding: 0 1em;
  margin: 0 0 1em; }

html.orgRoster .orgRoster__member--inviting td {
  background: #518f51;
  color: white; }

html.orgRoster .orgRoster__member--inviting td:first-child {
  border-radius: 3px 0 0 3px; }

html.orgRoster .orgRoster__member--inviting td:last-child {
  border-radius: 0 3px 3px 0; }

html.orgRoster .orgRoster__member--inviting .invite__button {
  background: white;
  color: black; }

html.orgRoster .orgRoster__member--inviting .invite__popupContainer {
  display: block; }

html.orgRoster .orgRoster__member--inviting .invite__button__arrow {
  border-top-color: black; }

html.orgRoster .orgRoster__member--removed .orgRoster__member__name,
html.orgRoster .orgRoster__member--removed .orgRoster__member__status,
html.orgRoster .orgRoster__member--removed .orgRoster__member__role label:not(.orgRoster__member__isRemoved) {
  opacity: 0.2; }

html.orgRoster .orgRoster__member__name input {
  width: 100%; }

html.orgRoster .orgRoster__member__role label {
  white-space: nowrap; }

html.orgRoster .orgRoster__member__role label:not(:last-child) {
  margin-right: 2em; }

html.orgRoster .orgRoster__addRow td {
  border-bottom: 1px solid black; }

html.orgRoster .orgRoster__topButtons {
  text-align: center;
  margin: 1em 0 3em; }

html.orgRoster .orgRoster__endButtons {
  text-align: center;
  margin-bottom: 8em; }

html.orgRoster .orgRoster__editButton,
html.orgRoster .orgRoster__cancelButton {
  color: black;
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #e6e6e6;
  padding: 0.2em 1em;
  cursor: pointer; }
  html.orgRoster .orgRoster__editButton:hover,
  html.orgRoster .orgRoster__cancelButton:hover {
    background-color: #e6e6e6; }

html.orgRoster .orgRoster__saveButton {
  color: white;
  padding: 8px 30px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  display: inline-block;
  background-color: #e06d06;
  border: 2px solid white;
  margin-right: 1em; }
  html.orgRoster .orgRoster__saveButton:hover {
    background-color: #f98720; }

html.overview h1 {
  text-align: center;
  padding-top: 1em;
  color: #929291;
  padding-bottom: 0.5em; }

html.overview .main {
  padding-bottom: 2em; }

html.overview section {
  padding-top: 1em;
  padding-bottom: 1em; }

html.overview .main p {
  font-family: Bitter, serif; }

html.overview button {
  color: white;
  padding: 8px 30px;
  border-radius: 5px;
  border-width: 1px;
  cursor: pointer;
  font-size: 18px;
  display: inline-block;
  background-color: #e06d06; }
  html.overview button:hover {
    background-color: #f98720; }

.phrasebook {
  font-family: Bitter, serif;
  font-size: 16px; }
  .phrasebook ul, .phrasebook ol, .phrasebook p {
    line-height: 1.5em; }
  .phrasebook li {
    padding: 0.2em 0; }
    .phrasebook li p {
      margin-top: 0;
      margin-bottom: 0; }
    .phrasebook li ul, .phrasebook li ol {
      margin-top: 0.5em; }

.phrasebook__prose code {
  padding: 0.1em 0.2em;
  margin-left: 0.2em;
  margin-right: 0.2em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px; }

.phrasebook__prose a code {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0; }

@media (min-width: 1140px) {
  .phrasebook {
    margin-top: 3em; }
  .phrasebook .sourceCode {
    margin: 0;
    overflow: visible;
    border-radius: 0; }
  .phrasebook div.sourceCode {
    border-left: 1px solid #5e5086;
    border-right: 1px solid #5e5086; }
  .phrasebook code.sourceCode {
    padding: 0 1em; }
  .phrasebook__section:not(:last-child), .phrasebook__intro:not(:last-child) {
    margin-bottom: 40px; }
  .phrasebook__row .phrasebook__prose > *:first-child {
    margin-top: 0; }
  .phrasebook__row:first-child .phrasebook__prose > *:first-child {
    margin-top: 10px; }
  .phrasebook__code--image {
    text-align: center; }
  .phrasebook__code--endingWithBlankLine code.sourceCode {
    padding-bottom: 1.5em; }
  .phrasebook__row:first-child .phrasebook__code .sourceCode code.sourceCode {
    padding-top: 10px; }
  .phrasebook__row:first-child .phrasebook__code pre.sourceCode {
    border-top: 1px solid #7d6bb3; }
  .phrasebook__row:last-child .phrasebook__code .sourceCode code.sourceCode {
    padding-bottom: 10px; }
  .phrasebook__row:last-child .phrasebook__code pre.sourceCode {
    border-bottom: 1px solid #7d6bb3; }
  .phrasebook__row {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box; }
  .phrasebook__row--proseAndCode {
    display: flex;
    justify-content: space-between; }
    .phrasebook__row--proseAndCode .phrasebook__prose {
      width: 400px; }
    .phrasebook__row--proseAndCode .phrasebook__code {
      width: 650px; }
    .phrasebook__row--proseAndCode:not(:last-child) {
      align-items: stretch; }
      .phrasebook__row--proseAndCode:not(:last-child) .phrasebook__code .sourceCode {
        height: 100%; }
    .phrasebook__row--proseAndCode:last-child {
      align-items: flex-start; }
  .phrasebook__row--proseOnly {
    padding-right: 700px; }
  .phrasebook__row--codeOnly,
  .phrasebook__row--codeTitle {
    padding-left: 450px; }
  .phrasebook__codeTitle {
    font-family: "Fira Mono", monospace;
    text-align: right;
    padding-right: 1em;
    margin-bottom: 5px; }
    .phrasebook__codeTitle a:link, .phrasebook__codeTitle a:visited {
      color: inherit; }
    .phrasebook__codeTitle a:link {
      text-decoration: none;
      background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
      background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
      -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      background-repeat: no-repeat, no-repeat, repeat-x;
      text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
      background-position: 0% 93%, 100% 93%, 0% 93%; } }
    @media screen and (min-width: 1140px) and (-webkit-min-device-pixel-ratio: 0) {
      .phrasebook__codeTitle a:link {
        background-position-y: 87%, 87%, 93%; } }
@media (min-width: 1140px) {
      .phrasebook__codeTitle a:link:link::selection, .phrasebook__codeTitle a:link:link::-moz-selection {
        text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
        background: #b4d5fe;
        /* todo - selected smart-underline text looks bad, this isn't working? */ }
  .phrasebook__intro {
    margin: 0 auto;
    width: 850px;
    text-align: justify; }
  .phrasebook hr {
    margin: 1em auto 2em;
    width: 900px;
    height: 3px;
    border: 0;
    background: #dedbbe;
    border-radius: 1.5px; } }

@media not all and (min-width: 1140px) {
  .phrasebook {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px; }
  .phrasebook hr {
    margin: 2em 20px 2em;
    height: 3px;
    border: 0;
    background: #dedbbe;
    border-radius: 1.5px; }
  .phrasebook__codeTitle {
    display: none; } }

.product {
  display: inline-block;
  width: 200px;
  margin: 0.3ex 0;
  text-align: center; }

.product a {
  display: block;
  text-decoration: none;
  background: white;
  border: 1px solid black;
  padding: 15px 5px; }

.product a:hover {
  box-shadow: 0 0 25px -5px #e06d06; }

.product__image {
  width: 168px;
  height: 84px;
  margin: 0;
  border-radius: 6px; }

.product__title {
  display: block;
  text-align: center;
  font-family: "Fira Sans Condensed", sans-serif;
  color: black; }

html.search #query {
  font-size: 20px;
  padding: 10px 15px;
  border-style: solid;
  border-width: 1px;
  background: rgba(255, 255, 255, 0.9); }

html.search #results {
  margin: 50px 0; }

html.search .searchResult {
  margin: 20px 0;
  font-family: Bitter, serif; }
  html.search .searchResult a {
    color: #2c4e2c; }
  html.search .searchResult a:hover {
    color: #518f51; }

html.search .searchResult__title {
  font-size: 20px;
  font-weight: bold; }

html.search .searchResult__abstract {
  font-size: 16px;
  color: #333333; }

@media (min-width: 760px) {
  html.search .intro form {
    padding: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; }
  html.search #query {
    flex: 1;
    border-radius: 5px 0 0 5px;
    border-color: black rgba(0, 0, 0, 0.8) black black; }
  html.search .intro button {
    border-style: solid;
    border-radius: 0 5px 5px 0;
    border-width: 1px 1px 1px 0;
    border-color: black;
    background: rgba(50, 150, 200, 0.9);
    color: white;
    font-weight: bold;
    padding: 0 30px;
    cursor: pointer; }
    html.search .intro button:hover {
      background: rgba(60, 160, 210, 0.95); }
  html.search #results {
    list-style: none; }
  html.search .searchResult {
    text-align: justify;
    padding-left: 50px;
    padding-right: 50px;
    text-indent: -50px;
    line-height: 1.75; }
  html.search .searchResult__title:link {
    text-decoration: none;
    background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#518f51, #518f51);
    background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#518f51, #518f51);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
    background-position: 0% 93%, 100% 93%, 0% 93%; } }
  @media screen and (min-width: 760px) and (-webkit-min-device-pixel-ratio: 0) {
    html.search .searchResult__title:link {
      background-position-y: 87%, 87%, 93%; } }
@media (min-width: 760px) {
    html.search .searchResult__title:link:link::selection, html.search .searchResult__title:link:link::-moz-selection {
      text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
      background: #b4d5fe;
      /* todo - selected smart-underline text looks bad, this isn't working? */ } }

@media not all and (min-width: 760px) {
  html.search .intro form {
    padding: 2em 0; }
  html.search #query {
    width: 100%;
    box-sizing: border-box; }
  html.search .intro button {
    display: none; }
  html.search #results {
    list-style: decimal;
    padding-left: 20px; }
  html.search .searchResult {
    line-height: 1.5;
    padding-left: 10px; } }

html.siteMap {
  counter-reset: item-counter; }
  html.siteMap .intro {
    color: white;
    padding: 75px 0 25px;
    font-size: 40px;
    text-align: center;
    font-family: Bitter, serif; }
  html.siteMap .sitemapContent {
    padding: 75px 0; }
  html.siteMap .sitemap__item {
    counter-increment: note-counter;
    font-family: Bitter, serif;
    font-size: 16px; }
    html.siteMap .sitemap__item a:link, html.siteMap .sitemap__item a:visited {
      color: inherit; }
    html.siteMap .sitemap__item a:link {
      text-decoration: none;
      background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
      background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
      -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      background-repeat: no-repeat, no-repeat, repeat-x;
      text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
      background-position: 0% 93%, 100% 93%, 0% 93%; }
      @media screen and (-webkit-min-device-pixel-ratio: 0) {
        html.siteMap .sitemap__item a:link {
          background-position-y: 87%, 87%, 93%; } }
      html.siteMap .sitemap__item a:link:link::selection, html.siteMap .sitemap__item a:link:link::-moz-selection {
        text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
        background: #b4d5fe;
        /* todo - selected smart-underline text looks bad, this isn't working? */ }
  html.siteMap .sitemap__item__title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0.5em; }
    html.siteMap .sitemap__item__title::before {
      content: counter(note-counter);
      display: inline-block;
      margin-right: 1em;
      font-weight: normal;
      color: #518f51;
      font-size: 16px; }
  html.siteMap .sitemap__item__image {
    border: 1px solid lightgray;
    border-radius: 5px; }
  html.siteMap .sitemap__item__abstract {
    line-height: 1.7; }
    html.siteMap .sitemap__item__abstract p:first-child {
      margin-top: 0; }
    html.siteMap .sitemap__item__abstract p:last-child {
      margin-bottom: 0; }
  @media (min-width: 760px) {
    html.siteMap .sitemap__item {
      display: grid;
      grid-template-columns: auto 202px;
      justify-content: space-between;
      grid-gap: 0.5em 2em;
      margin-bottom: 2em; }
    html.siteMap .sitemap__item__title {
      grid-column: 1 / span 2; }
    html.siteMap .sitemap__item__abstract {
      grid-column: 1; }
    html.siteMap .sitemap__item__image {
      grid-column: 2;
      width: 200px;
      height: 100px; }
    html.siteMap .sitemap__item__children {
      grid-column: 1 / span 2;
      line-height: 2.4;
      margin: 0;
      padding: 0 2em;
      list-style: none; }
    html.siteMap .sitemap__item__child {
      display: inline-block;
      padding: 0;
      margin: 0 0.5em; } }
  @media not all and (min-width: 760px) {
    html.siteMap .sitemap__item {
      display: grid;
      grid-gap: 0.5em; }
    html.siteMap .sitemap__item > * {
      grid-column: 1; }
    html.siteMap .sitemap__item:not(:last-child) {
      margin-bottom: 2em;
      border-bottom: 1px solid black;
      padding-bottom: 2em; }
    html.siteMap .sitemap__item__image {
      display: none; }
    html.siteMap .sitemap__item__children {
      line-height: 2.4;
      margin: 0;
      padding: 0 2em;
      list-style: none; }
    html.siteMap .sitemap__item__child {
      display: inline-block;
      padding: 0;
      margin: 0 0.5em; } }
/* "Smart underline" from tufte-css

    https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167

Looks a lot nicer than regular underline, but use sparingly because it
can cause some complications. */
/* Pages that contain a Stripe payment form. */
html.stripe h1 {
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1em; }

/* There's a paragraph or two on the page explaining what's going on. */
html.stripe .main p {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto; }

.stripeForm {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto; }

.stripeForm a:link, .stripeForm a:visited {
  color: inherit; }

.stripeForm a:link {
  text-decoration: none;
  background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
  background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
  background-position: 0% 93%, 100% 93%, 0% 93%; }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .stripeForm a:link {
      background-position-y: 87%, 87%, 93%; } }
  .stripeForm a:link:link::selection, .stripeForm a:link:link::-moz-selection {
    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
    background: #b4d5fe;
    /* todo - selected smart-underline text looks bad, this isn't working? */ }

.stripeForm strong {
  color: #e06d06; }

.stripeForm .fa {
  color: gray; }

.stripeForm__instruction {
  margin-top: 1em;
  margin-bottom: 1em; }

.priceControl {
  border: 1px solid #c0c0c0;
  padding-left: 1.2em;
  padding-bottom: 1em;
  background: white; }

.priceControl__label {
  margin-top: 1em;
  margin-bottom: 1em; }

.priceControl__option {
  margin: 0.5em; }
  .priceControl__option label {
    margin-left: 0.5em; }

/* The rest of the form components */
.stripeForm__buttonRow {
  text-align: center;
  margin-top: 2em; }

.stripeForm__buttonRow button {
  color: white;
  padding: 8px 30px;
  border-radius: 5px;
  border-width: 1px;
  cursor: pointer;
  font-size: 18px;
  display: inline-block;
  background-color: #e06d06; }
  .stripeForm__buttonRow button:hover {
    background-color: #f98720; }

/* Some padding at the bottom of the page below the footer */
html.stripe .main {
  padding-bottom: 2em; }

.testModeIndicator {
  color: white;
  position: absolute;
  right: 0;
  left: 0;
  top: 10px; }
  @media (min-width: 760px) {
    .testModeIndicator {
      text-align: center; } }
  @media not all and (min-width: 760px) {
    .testModeIndicator {
      text-align: right; } }
/* Highly general things */
/* We start with some basic very broadly-applicable rules */
/* Remove any spacing that the browser puts around the page, so that we can draw things that extend all the way to the edge of the screen. */
html, body {
  margin: 0;
  padding: 0; }

/* This ensures that a horizontal scrollbar never appears on the page, because it looks really bad. */
html, body {
  overflow-x: hidden; }

/* All pages use our off-white color for the background. */
body {
  background-color: #fcf9f4; }

/* Give the entire body a default font size and family to make sure the font always appears consistent across browsers even if we forget to set it somewhere. */
body {
  font-size: 16px;
  font-family: Lato, sans-serif; }

/* Disable auto-enlargement of small text in mobile Safari
https://blog.55minutes.com/2012/04/iphone-text-resizing/ */
body {
  -webkit-text-size-adjust: 100%; }

/* Code is shown in a monospace font, of course. */
code {
  font-family: "Fira Mono", monospace; }

/* If a code block has the "wrap" attribute, then its lines are allowed to wrap. */
.wrap code {
  white-space: pre-wrap; }

/* Whitespace in code is typically important. For example, if we write `"  "` in markdown which renders to <code>"  "</code> in HTML, that denotes a string literal consisting of two spaces, and it does not mean the same thing if we allow the browser to collapse the two spaces into one. Furthermore, we would not want such code to be line wrapped, because that also has the possibility of obscuring significant whitespace, and also because wrapped expressions become difficult to read. */
code {
  white-space: pre; }

/* Buttons and form inputs usually look best in a sans-serif font */
button, input {
  font-family: Lato, sans-serif; }

/* We have a particular font that we apply to all the "header" elements */
h1, h2, h3, h4, h5, h6 {
  font-family: "Fira Sans Condensed", sans-serif; }

/* *Strong* text is urgent or serious, and conventionally displayed in bold. */
strong {
  font-weight: bold; }

/* /Emphatic/ text is conventionally shown in italics. */
em {
  font-style: italic; }

/* By default, superscripts and subscripts can affect line height, leading to a visually unappealing inconsistency in the line heights within a paragraph. This is a fix for that problem. */
sup, sub {
  line-height: 1; }

sup {
  vertical-align: text-top; }

sub {
  vertical-align: text-bottom; }

/* Browsers underline links by default; we disable this. In some cases we may underline links, but we will turn this on on a case-by-case basis. */
a {
  text-decoration: none; }

/* Sometimes we indicate links using a green color (but we don't set this as the default, we just provide this mixin and enable it where appropriate.) */
/* If you want darker links, use this alternate form. */
/* Show a bright contrasting outline around whatever's in focus to make it easy to see. */
:focus {
  outline: 2px solid orange; }

/* On large screens, we constrain the size of the main page content. In most cases, this is done by wrapping content in a <div class="container"> element, as is the conventional approach (popularized by Bootstrap). We also include a little bit of left and right padding in container so that on smaller screens the content will not come too close to the edge of the screen. */
.container {
  max-width: 1040px;
  padding-left: 20px;
  padding-right: 20px;
  /* Setting left and right margins to 'auto' centers the content on the page. */
  margin-left: auto;
  margin-right: auto;
  display: block; }

/* Sometimes we customize the selection background color. We don't do this everywhere, but the color is defined here for the places that do. */
.timeline {
  max-width: 1040px;
  padding-left: 20px;
  padding-right: 20px;
  /* Setting left and right margins to 'auto' centers the content on the page. */
  margin-left: auto;
  margin-right: auto;
  display: block; }

.timeline p {
  margin-top: 2em;
  margin-bottom: 2em;
  text-align: justify;
  max-width: 45em;
  margin-left: auto;
  margin-right: auto; }

.timeline__item {
  line-height: 1.5;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0.4em; }
  .timeline__item a {
    color: #2c4e2c; }
  .timeline__item a:hover {
    color: #518f51; }

.timeline__item__time {
  font-style: italic;
  text-align: right;
  width: 10em;
  flex: none;
  margin-right: 1em; }

html.unsubscribe .main p {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto; }