/* --- rail ---
   A table of contents for the page you are on. Names only, fixed beside the
   reading column, so every section stays reachable through the whole scroll.
   The text itself stays in the body, because a 210px column would make it
   unreadable.

   Anchored to the column rather than to the viewport edge. `left: calc(50% +
   420px)` holds a constant 20px gap from the 820px reading column at any
   window width, instead of drifting to the far right of a wide monitor and
   leaving a lake of black between the two.

   Shown from 1320px, where (1320 - 820) / 2 = 250px a side leaves the rail
   clear of the text with 30px to spare. Below that the body sections carry it.

   Shared by the drill page and every post, so the two cannot drift apart. */
/* An <aside>, and deliberately not a <nav>: css/style.css styles the bare
   `nav` selector as the site's fixed top bar, so a second <nav> anywhere on a
   page inherits position:fixed, top:0, left:0 and lands over the content. */
.rail { display: none; }

@media (min-width: 1320px) {
  .rail {
    display: block;
    position: fixed;
    top: 120px;
    left: calc(50% + 420px);
    width: 210px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    z-index: 5;
  }

  .rail-title {
    font-size: 12px;
    font-weight: 500;
    color: #787878;
    margin: 0 0 12px 0;
    letter-spacing: 0;
  }

  .rail-list { list-style: none; margin: 0; padding: 0; }
  .rail-list li { margin-bottom: 7px; }

  .rail-list a {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4em;
    color: #858585;
    display: block;
    border-left: 1px solid transparent;
    padding-left: 10px;
    margin-left: -11px;
    -webkit-transition: color 0.2s ease, border-color 0.2s ease;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .rail-list a:hover { color: #ccc; opacity: 1; }

  /* Set by js/rail.js on the section currently under the reader. The marker is
     the whole point of the rail being here rather than at the top of the page:
     it answers "where am I" without the reader having to work it out. */
  .rail-list a.is-current {
    color: #e4e4e4;
    border-left-color: #3a3a3a;
  }

  .rail-sep {
    margin: 16px 0 12px;
    border: none;
    border-top: 1px solid #1e1e1e;
  }
}

/* The rail is decoration for a reader who can see it. On a narrow screen it is
   not rendered at all, so nothing here needs a reduced-motion variant. */