/* Shared article styling for the long-form blog posts.
   The page chrome (nav, footer, base type) comes from style.css; this file is
   only what a post needs, so a new post is a content file rather than a copy
   of every rule. */

/* Back to the index, at the top where a reader looks for it rather than at the
   foot, which already offers the next post and the site links. It carries the
   clearance under the fixed nav that .post-head used to. */
.post-back {
  max-width: 760px;
  margin: 0 auto;
  padding: 110px 40px 0;
  font-size: 14px;
  font-weight: 400;
}

.post-back a { color: #888; }
.post-back a:hover { color: #fff; opacity: 1; }

.post-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 40px 30px;
}

.post-title {
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -2px;
  line-height: 1.15em;
  color: #fff;
  margin: 0 0 18px 0;
}

.post-standfirst {
  font-weight: 300;
  font-size: 19px;
  line-height: 1.6em;
  letter-spacing: -0.3px;
  color: #888;
  margin: 0 0 16px 0;
}

.post-meta {
  font-size: 14px;
  font-weight: 300;
  color: #787878;
}

.post-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px 40px;
}

.post-body h2 {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -1.1px;
  line-height: 1.25em;
  color: #fff;
  margin: 44px 0 14px 0;
  /* Sections carry generated ids so search can deep-link to them. Clears the
     70px fixed nav on arrival. */
  scroll-margin-top: 92px;
}

.post-body h3 {
  font-weight: 500;
  font-size: 17px;
  color: #b8b8b8;
  margin: 30px 0 10px 0;
}

.post-body p {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75em;
  color: #9c9c9c;
  margin: 0 0 16px 0;
}

.post-body ol,
.post-body ul {
  margin: 0 0 16px 0;
  padding-left: 22px;
  color: #9c9c9c;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75em;
}

.post-body li { margin-bottom: 10px; }

.post-body b,
.post-body strong { font-weight: 500; color: #d2d2d2; }

.post-body em { font-style: italic; color: #b0b0b0; }

.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: #131313;
  border: 1px solid #232323;
  border-radius: 5px;
  padding: 1px 5px;
  color: #c4c4c4;
}

/* Wrapper added by js/copy-code.js so the button can be positioned against
   something that does not scroll. Without the script there is no wrapper and
   the pre below still stands on its own. */
.code-wrap { position: relative; }

.code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #888;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  padding: 5px 10px;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.code-wrap:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }

.code-copy:hover { color: #ddd; border-color: #444; }
.code-copy.is-done { color: #fff; border-color: #444; opacity: 1; }

/* No hover on a touch screen, so the button is always visible there. */
@media (hover: none) {
  .code-copy { opacity: 1; }
}

/* Code blocks. Scroll inside their own box rather than widening the page,
   which is what long lines would otherwise do on a phone. */
.post-body pre {
  background: #0c0c0c;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 18px 20px;
  /* Inset from the prose so a block reads as a separate object rather than as
     another paragraph. Matches the 18px .case uses for the same reason. */
  margin: 0 0 22px 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post-body pre code {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.65em;
  color: #b6b6b6;
  white-space: pre;
  display: block;
}

/* A walked-through scenario. Set apart because it is the part people skim to. */
.case {
  border-left: 2px solid #2c2c2c;
  padding: 6px 0 6px 18px;
  margin: 0 0 16px 0;
}

.case p:last-child { margin-bottom: 0; }

/* Failure modes. Boxed because it is the part worth reading twice. */
.warn {
  background: #101010;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 20px 22px;
  margin: 20px 0;
}

.warn p { margin-bottom: 12px; }
.warn p:last-child { margin-bottom: 0; }

.post-foot {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px 110px;
}

/* The rule lives on the paragraph, not on .post-foot. On the container it is
   drawn across the whole box and ignores the 40px padding, which made it 80px
   wider than the next-post card above and left it touching the card's bottom
   edge. On the paragraph it spans the text column, so it lines up. */
.post-foot p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7em;
  color: #888;
  margin: 0;
  padding-top: 30px;
  border-top: 1px solid #161616;
}

.post-foot a { text-decoration: underline; -webkit-text-decoration-color: #333; text-decoration-color: #333; }
.post-foot a:hover { -webkit-text-decoration-color: #777; text-decoration-color: #777; }

/* --- next post ---
   Somewhere to go after the last paragraph other than back. Sits above the
   foot, because the foot is about who wrote this and the reader deciding
   whether to carry on comes first. */
.post-next {
  /* 760px, matching .post-body, so the card's edges line up with the text
     above it rather than sitting 30px proud on each side. */
  max-width: 760px;
  margin: 0 auto;
  /* Real space at the bottom: the foot's rule sits directly under this, and
     with no padding here the card's border and that rule collided. */
  padding: 30px 40px 40px;
}

.post-next a {
  display: block;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 22px 24px;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

.post-next a:hover { border-color: #444; opacity: 1; }

.post-next-label {
  display: block;
  font-size: 13px;
  font-weight: 300;
  color: #787878;
  margin-bottom: 8px;
}

.post-next-title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 1.3em;
  color: #fff;
  margin-bottom: 7px;
}

.post-next-desc {
  display: block;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6em;
  color: #888;
}

@media (max-width: 767px) {
  /* The inset costs readable width on a phone, where the block is already
     scrolling horizontally. Full width there. */
  .post-body pre { margin-left: 0; padding: 14px 16px; }
  .post-body pre code { font-size: 12px; }
  .post-next { padding: 24px 24px 32px; }
  .post-next a { padding: 20px 20px; }
  .post-next-title { font-size: 18px; }
  .post-next-desc { font-size: 14px; }
  .post-back { padding: 90px 24px 0; }
  .post-head { padding: 20px 24px 24px; }
  .post-title { font-size: 28px; letter-spacing: -1.2px; }
  .post-standfirst { font-size: 16px; }
  .post-body { padding: 0 24px 30px; }
  .post-body h2 { font-size: 21px; letter-spacing: -0.8px; margin-top: 34px; }
  .post-body p,
  .post-body ol,
  .post-body ul { font-size: 16px; }
  .post-foot { padding: 0 24px 80px; }
  .post-foot p { padding-top: 26px; }
}