Prose: Default

.s-prose {
  @apply --typeset-prose;

  max-width: 75ch;

  > * {
    margin-bottom: 0.75em;
  }

  /* Text */
  strong,
  dt {
    font-family: map(fonts, family-sans);
  }

  pre,
  code,
  samp {
    font-variant: lining-nums tabular-nums;
    hanging-punctuation: none;
    hyphens: none;
  }

  pre,
  code {
    margin: -0.125em 0.125em;
    padding: 0.0625em 0.125em;
    background-color: color(white a(50%));
  }

  /* Grouping content */
  pre {
    margin: 1em -0.5em;
    padding: 0.25em 0.5em;

    code {
      margin: 0;
      background-color: transparent;
      padding: 0;
    }
  }

  > ol,
  > ul {
    list-style-position: inside;

    @media (--from-large-screen) {
      list-style-position: outside;
    }
  }

  li {
    margin-bottom: 0.25em;
  }

  > ul > li {
    list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.75em' height='0.75em' viewBox='0 0 2 2'%3E%3Cpolygon fill='%233F3F46' fill-opacity='.75' points='0 1 1 0 2 1 1 2'/%3E%3C/svg%3E ");
  }

  ul li {
    list-style-type: circle;
  }

  ol li {
    list-style-type: decimal;
  }

  li li,
  dd {
    margin-left: 2em;
  }

  dt {
    font-weight: 700;
  }

  .caps {
    font-variant: lining-nums small-caps;
  }

  .caption {
    @apply --typeset-caption;

    opacity: 0.9;
  }

  .lede {
    @apply --typeset-lede;

    position: relative;
    top: calc(map(spaces, xsmall) * -1);
  }
}

.s-prose--article {
  @apply --typescale-prose;

  > *:first-child {
    margin-top: 0;
  }

  pre,
  figure,
  table {
    margin-top: map(spaces, large);
    margin-bottom: map(spaces, large);
  }

  /* Sections */
  h2,
  h3,
  h4,
  h5 {
    @apply --typeset-heading;

    margin-top: map(spaces, large);
    margin-bottom: map(spaces, small);
  }

  h2 {
    margin-top: map(spaces, xlarge);
    font-size: 1.5em;
    font-weight: 700;
  }

  h2,
  h3 {
    color: $color-day--dark;
    color: var(--color-day--dark, $color-day--dark);
  }

  h3 {
    font-size: 1.25em;
    opacity: 0.9;
  }

  h2 + h3 {
    margin-top: 0;
  }

  h4 {
    font-size: 1.125em;
  }

  h5 {
    font-size: 0.875em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
  }

  hr {
    text-align: center;
    margin: map(spaces, large) 0 map(spaces, xlarge);

    &::after {
      content: '\25C6 \25C6 \25C6';
      height: 0;
      font-family: sans-serif;
      letter-spacing: map(spaces, medium);
      color: color($color-text a(25%));
    }
  }

  /* Grouping content */
  blockquote {
    border-left: 0.25rem solid $prose-color--rule;
    padding-left: map(spaces, medium);
    margin-bottom: map(spaces, large);

    > p,
    > ul,
    > ol {
      margin-bottom: 0.75em;
      font-size: 1.125em;
      line-height: 1.25;
      list-style-position: inside;
    }

    > footer,
    > cite { /* ! Legacy */
      @apply --typeset-caption;
    }
  }

  figure,
  p.image { /* ! Legacy */
    margin-left: calc(map(spaces, large) * -1);
    margin-right: calc(map(spaces, large) * -1);
    max-width: none;

    @media (--from-large-screen) {
      margin-left: 0;
      margin-right: 0;
    }

    @media (--from-max-screen) {
      margin-right: -20%;
    }
  }

  figcaption,
  p.image span.caption { /* ! Legacy */
    @apply --typeset-caption;

    display: block;
    border-bottom: 1px solid $prose-color--rule;
    margin-right: map(spaces, large);
    margin-left: map(spaces, large);
    padding: map(spaces, medium) 0;

    @media (--from-large-screen) {
      margin: 0;
    }
  }

  /* Embedded content */
  img,
  video {
    display: block;
    max-width: 100%;
  }

  /* Key press within user input sequence. */
  kbd > kbd {
    font-size: 90%;
    background-color: white;
    margin: 0 0.125rem;
    border: 1px solid $prose-color--shadow;
    border-radius: map(borders, radius-default);
    padding: map(spaces, xsmall) map(spaces, small);
    box-shadow: 0 1px 0 $prose-color--shadow;
  }

  /* Menu selection within user input sequence. */
  kbd > samp {
    font-family: inherit;
    font-size: 1em;
    background-color: white;
    margin: -0.375rem -0.625rem; /* -6px -10px */
    border-radius: 0;
    padding: 0.375rem 0.625rem; /* 6px 10px */
    box-shadow: none;
  }

  /* Links */
  a {
    text-decoration: underline;
    text-decoration-color: var(--color-day--dark-alpha, $color-day--dark-alpha);

    &:hover {
      text-decoration-color: var(--color-day, $color-day);
    }

    @media print {
      border-bottom: 1px dotted #999;

      &::after {
        font-size: 0.75em;
        content: ' [' attr(href) ']';
      }
    }
  }

  /* Tables */
  table {
    @apply --typeset-ui;

    ol,
    ul {
      margin-left: map(spaces, large);
    }
  }

  caption {
    @apply --typeset-caption;

    color: map(colors, neutral, base);
    caption-side: bottom;
    text-align: left;
    margin: map(spaces, medium) 0;
  }

  td,
  th {
    border-bottom: 1px solid $prose-color--rule;
    padding: map(spaces, small) map(spaces, large) map(spaces, small) map(spaces, small);
    hyphens: none;
  }

  th {
    line-height: 1.25;
    background-color: $prose-color--background;

    code {
      background: none;
    }
  }

  .pull-right {
    @media (--from-large-screen) {
      width: 40%;
      float: right;
      margin-top: 0;
      margin-left: map(spaces, large);
    }
  }

  .footnotes {
    @apply --typeset-caption;

    li {
      margin-bottom: map(spaces, small);
    }

    a:last-of-type {
      /* Chrome doesn’t seem to use fallback glyph in font stack */
      font-family: sans-serif;
    }
  }
}