/* Journal pages (/journal/): long-form text on top of the image-led theme in style.css.
   Everything is scoped to body.journal or journal-* classes, so the billboard pages
   are untouched. Generated by journal.py. */

body.journal {
  color: #111;
  background: #fff; }

/* The theme header is transparent with a white logo and burger, made to sit on
   photographs. A black band behind it keeps both legible over text. */
body.journal::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background: #000;
  z-index: 1999; }

body.journal .global-menu .overlay {
  background: #000;
  opacity: .9; }

/* Clear the fixed header (4rem / 5rem / 6rem in style.css). */
body.journal .wrapper {
  padding: 6rem 1rem 0; }

@media screen and (min-width: 400px) {
  body.journal::before {
    height: 5rem; }
  body.journal .wrapper {
    padding: 7.5rem 1.5rem 0; } }

@media screen and (min-width: 1440px) and (min-height: 800px) {
  body.journal::before {
    height: 6rem; }
  body.journal .wrapper {
    padding-top: 9rem; } }

body.journal a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px; }

/* Reading column */
.journal-head,
.journal-body,
.journal-pager,
.journal-list {
  max-width: 35rem;
  margin-left: auto;
  margin-right: auto; }

.journal-crumbs,
.journal-meta {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b6b6b; }

.journal-crumbs {
  margin: 0 0 1.5rem; }
  .journal-crumbs a {
    color: inherit; }
  .journal-crumbs a:hover {
    color: #000;
    -webkit-transform: none;
            transform: none; }

.journal-head h1 {
  margin: 0 0 .45em;
  font-size: 2.1rem;
  line-height: .95;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  overflow-wrap: break-word; }

.journal-meta {
  margin: 0 0 1.25rem; }

.journal-lede {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.45;
  color: #333; }

.journal-figure {
  max-width: 60rem;
  margin: 2.5rem auto;
  background: #f6f6f6; }
  .journal-figure img {
    display: block;
    width: 100%;
    height: auto; }

/* Article text */
.journal-body {
  font-size: .95rem;
  line-height: 1.6; }
  .journal-body p,
  .journal-body ul {
    margin: 0 0 1.1em; }
  .journal-body ul {
    padding-left: 1.2em; }
  .journal-body li {
    margin: 0 0 .5em; }
  .journal-body li::marker {
    color: #8a8a8a; }
  .journal-body h2 {
    margin: 2.2em 0 .6em;
    font-size: 1.35rem;
    line-height: 1.05;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase; }
  .journal-body h3 {
    margin: 1.6em 0 .35em;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 700; }
  .journal-body h2 + h3 {
    margin-top: 1em; }
  .journal-body a {
    display: inline;
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em; }
  .journal-body a:hover {
    -webkit-transform: none;
            transform: none;
    text-decoration-thickness: 2px; }

/* Previous / next */
.journal-pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d9d9d9; }
  .journal-pager a {
    display: block;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 14rem;
            flex: 1 1 14rem;
    color: #000;
    font-size: .95rem;
    line-height: 1.1;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase; }
  .journal-pager a:hover {
    -webkit-transform: none;
            transform: none;
    text-decoration: underline; }
  .journal-pager span {
    display: block;
    margin-bottom: .35rem;
    font-size: .7rem;
    font-style: normal;
    letter-spacing: .08em;
    color: #6b6b6b; }
  .journal-pager .journal-next {
    text-align: right; }

/* Index */
.journal-list {
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none; }
  .journal-list li {
    padding: 1.75rem 0;
    border-top: 1px solid #d9d9d9; }
  .journal-list li:last-child {
    border-bottom: 1px solid #d9d9d9; }
  .journal-list .journal-meta {
    margin-bottom: .6rem; }
  .journal-list h2 {
    margin: 0 0 .4em;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase; }
  .journal-list h2 a {
    display: inline;
    color: #000; }
  .journal-list h2 a:hover {
    -webkit-transform: none;
            transform: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .12em; }
  .journal-list p:last-child {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #333; }

/* Closing band, like the contact band at the end of the home page */
.journal-footer {
  margin-top: 4rem;
  padding: 2rem 1rem;
  background: #F5F6F6;
  color: #000;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase; }
  .journal-footer p {
    margin: 0; }
  .journal-footer a {
    margin: .25rem .7rem;
    color: #000; }

@media screen and (min-width: 400px) {
  .journal-head h1 {
    font-size: 2.5rem; }
  .journal-body {
    font-size: 1rem; } }

@media screen and (min-width: 800px) {
  .journal-head h1 {
    font-size: 3.4rem; }
  .journal-lede {
    font-size: 1.3rem; }
  .journal-body {
    font-size: 1.1rem; }
  .journal-body h2 {
    font-size: 1.6rem; }
  .journal-body h3 {
    font-size: 1.2rem; }
  .journal-list h2 {
    font-size: 2rem; } }