/* Landreville — hand-written theme matching the WordPress "post-brutalist" design. */

@font-face {
  font-family: "Raleway";
  src: url("/fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: url("/fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: "Josefin Slab";
  src: url("/fonts/JosefinSlab-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Josefin Slab";
  src: url("/fonts/JosefinSlab-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
}

@font-face {
  font-family: "Josefin Sans";
  src: url("/fonts/JosefinSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
  color: #444;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

a {
  color: #257ac4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.site-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.site-title {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  margin: 0 0 24px;
  position: relative;
  top: -8px;
}

.site-title a {
  color: inherit;
}

.main-navigation {
  max-width: 800px;
  margin: 0 auto 64px;
}

.main-navigation ul.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.main-navigation .menu svg {
  display: block;
}

.main-navigation .current-menu-item > a {
  text-decoration: underline;
}

.site-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.subtext,
.post-meta,
.entry-footer {
  color: #7b7b7b;
}

.subtext a,
.post-meta a,
.entry-footer a {
  color: #6095c2;
  text-decoration: underline;
}

/* Postcards — the bordered article card used across listings and singles. */

.post-stream {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-stream > h1 {
  font-family: "Josefin Slab", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  margin: 2rem 0;
  max-width: 800px;
  width: 100%;
}

.postcard {
  border: 2px solid #1a1a1a;
  max-width: 800px;
  width: 100%;
  padding: 0 2rem 2rem;
  margin-bottom: 6rem;
}

.postcard--single {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}

/* The title and the heart both sit on the card's top border. The header is a
   flex row so the title shrinks to its own text: the white behind it then masks
   the border only where the letters are, and the heart's white inner fill masks
   the gap it straddles, so the border runs right up to both. */
.post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  top: -1.1rem;
  margin-bottom: -1.1rem;
}

.post-header__title {
  background: #fff;
  font-size: 2rem;
  /* The global 1.7 leading is what hangs a title below the card's top border:
     the line box is centred on the rule, so the taller it is, the lower the
     text sits inside it. One em puts the words on the line, as in production. */
  line-height: 1em;
  max-width: 80%;
  margin: 0;
  font-family: "Josefin Slab", sans-serif;
  font-weight: 900;
  padding: 0 0.25rem;
}

/* Outline heart from the production theme (blue ring, hollow white middle). */
.post-header::after {
  content: "";
  flex: none;
  width: 3rem;
  height: 3rem;
  position: relative;
  top: -0.25rem;
  background: url("/images/heart.svg") no-repeat center / contain;
}

.post-header__title--single {
  color: #444;
}

.postcard--listing .post-header__title a {
  color: #257ac4;
}

.postcard__body {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.postcard__body .feature-image {
  flex: 1 1 320px;
  min-width: 0;
}

.postcard__body:has(.postcard__excerpt) .feature-image {
  flex: 0 0 calc(40% - 1rem);
}

.postcard__excerpt {
  flex: 1 1 250px;
  min-width: 0;
}

.postcard__excerpt .more {
  margin: 1rem 0 0;
}

.feature-image {
  margin: 0;
}

.feature-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content .diagram svg {
  max-width: 100%;
  height: auto;
}

.entry-content .diagram .pele {
  --pele-font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --pele-font-mono: "Raleway", monospace;
}

.entry-content h2,
.entry-content h3 {
  font-family: "Josefin Slab", serif;
}

.entry-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.entry-content .wp-block-column {
  flex: 1 1 250px;
}

.entry-content .wp-block-media-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.entry-content .wp-block-media-text__media img {
  width: 100%;
}

.entry-content .has-large-font-size {
  font-size: 2.25rem;
  margin: 0;
}

@media (max-width: 600px) {
  .entry-content .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
    grid-template-areas: "media" "content";
  }
}

.entry-content pre,
.entry-content code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  background: #f4f4f4;
}

.entry-content pre {
  padding: 1rem;
  overflow-x: auto;
}

.inline-list {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

.inline-list li {
  display: inline;
}

.inline-list li + li::before {
  content: ", ";
}

.entry-footer {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto 32px;
  font-size: 1rem;
}

.post-navigation__next {
  text-align: right;
}

.page-content {
  max-width: 800px;
}

.page-title {
  font-family: "Josefin Slab", serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.photo-index > h1 {
  font-family: "Josefin Slab", sans-serif;
  font-size: 3rem;
  font-weight: 400;
}

/* Post index — the nav's "Posts" page: the one listing on the site without
   postcards, a plain column of titles. */

.post-index > h1 {
  font-family: "Josefin Slab", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  margin: 2rem 0;
}

.post-index__titles {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 800px;
  /* One blank line between titles: the gap is a line of the titles' own
     leading (1.17rem x 1.2). */
  display: grid;
  gap: 1.4rem;
}

.post-index__titles a {
  display: block;
  font-family: "Josefin Slab", sans-serif;
  /* The size a body-text h3 renders at (the theme sets no explicit h2/h3
     size, so this is the UA default 1.17em) and the index steps down from
     the 2rem the cards use. */
  font-size: 1.17rem;
  font-weight: 900;
  line-height: 1.2;
}

/* Photo grid: a justified gallery, Flickr style. Every photo in a row is the
   same height, rows differ from one another, and columns do not line up.
   Photos stay in strict newest-first reading order: left to right, then down.

   The whole thing is one flexbox property. A wrapping flex line hands out its
   leftover width in proportion to each item's flex-grow, so growing by the
   photo's aspect ratio makes each item's width land on ar * (one common
   height) — and since the image keeps its aspect ratio, dividing that width
   by ar gives back the same height for every item in the row. Row heights
   then vary on their own: a row of wide photos gets a short height, a row of
   tall photos a generous one. --w and --h are the photo's pixel dimensions,
   emitted by the photo-grid partial from imageConfig, so the arithmetic
   happens here rather than in the template.

   The width and height attributes on each <img> are what let the rows be the
   right size before the photos themselves have loaded. */

.photo-grid {
  /* A row is filled with about 4.5 units of aspect ratio, where one unit is
     the row's own height: three 3:2 photos (4.5 units) exactly fill a row.
     Stated as a share of the container rather than in pixels so the photos
     group the same way at every width; the 16px pays for the two gutters a
     three-item row needs. Narrow screens want four units instead — see the
     640px query at the bottom of this file. */
  --row-unit: calc((100% - 16px) / 4.5);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  max-width: 1200px;
}

.photo-grid li {
  flex-grow: calc(var(--w, 3) / var(--h, 2));
  flex-shrink: 1;
  flex-basis: calc(var(--row-unit) * var(--w, 3) / var(--h, 2));
  min-width: 0;
  overflow: hidden;
}

/* Without this the final partial row stretches its one or two photos to the
   full width of the page. As the last item it joins only that row, and its
   grow swamps the photos' there, so it eats the leftover and they keep the
   height their aspect ratio implies. */
.photo-grid::after {
  content: "";
  flex: 100000 0 0;
}

.photo-grid a {
  display: block;
}

.photo-grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lightbox (see /js/lightbox.js) */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 95vw;
  max-height: 92vh;
}

@media (max-width: 640px) {
  .site-title {
    font-size: 3rem;
  }

  /* Four units of aspect ratio per row, not 4.5: at three-across a 390px phone
     gives each 3:2 photo about 80px of width, so narrow screens go back to two
     3:2 photos, three squares, or two 3:2 plus a square per row. The 20px is
     the two gutters plus a little slack, which is what keeps four squares out
     of a row that three of them nearly fill. */
  .photo-grid {
    --row-unit: calc((100% - 20px) / 4);
  }
}