/* stevespindler.com -- typographic, map-maker's palette, no framework. */

:root {
  --ink: #1c1c1a;
  --ink-soft: #5d5c57;
  --rule: #ddd9d0;
  --paper: #fbfaf7;
  --accent: #1f5f4f; /* contour green */
  --measure: 38rem;
  --frame: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 4rem;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

main, .site-header, .site-footer { max-width: var(--measure); margin: 0 auto; }

/* ---------------------------------------------------------------- header */
.site-header {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

.site-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.site-search-link {
  flex: none;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.site-search-link:hover { color: var(--accent); border-color: var(--accent); }

.site-title {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
/* The title is the primary way home, so it has to read as clickable. */
.site-title:hover { color: var(--accent); }

.site-tagline {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------- post list */
.post-list { list-style: none; margin: 0; padding: 0; }

.post-list-item {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

/* Listings with a featured image put a small square alongside the text. */
.post-list-item.has-thumb {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.1rem;
  align-items: start;
}

.post-list-thumb { display: block; }
.post-list-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.post-list-date,
.post-meta {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.post-list-title { margin: 0.35rem 0 0.5rem; font-size: 1.4rem; line-height: 1.25; }
/* These must read as links. Without an underline a short lowercase title looks
   like plain text and nobody thinks to click it. */
.post-list-title a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.post-list-title a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.post-list-excerpt { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------- site nav */
/* Used by the page-led sites (cartographyclass, katespindler). */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
}
.site-nav a {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------- search */
.search-page { margin-bottom: 2.5rem; }

.search-label {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

.search-input {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.75rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 2px;
  -webkit-appearance: none;
}
.search-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.search-status {
  margin: 0.6rem 0 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

mark { background: #f6e7a8; color: inherit; padding: 0 0.1em; }

/* ------------------------------------------------------------ single post */
.post-header { margin-bottom: 2rem; }

/* The featured image, shown once above the body. */
.post-lead-image { margin: 0 0 2rem; }
.post-lead-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.post-header h1 { margin: 0 0 0.5rem; font-size: 2rem; line-height: 1.2; }
.post-meta time + .post-categories::before { content: " \00b7  "; }

.post-body h2, .post-body h3 { line-height: 1.3; margin-top: 2.2rem; }
.post-body h3 { font-size: 1.2rem; }
.post-body p { margin: 0 0 1.25rem; }
.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Images and maps break out of the text column -- this is a cartography blog. */
.post-body img,
.post-body figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
}

.post-body figure { margin: 2rem 0; }
.post-body figcaption {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.5rem;
}

.post-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.post-body th, .post-body td {
  border-bottom: 1px solid var(--rule);
  padding: 0.45rem 0.6rem;
  text-align: left;
}

.post-body blockquote {
  margin: 1.5rem 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
  font-style: italic;
}

/* Download links recovered from [themify_button] and [themify_icon]. */
.post-body .button {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--paper);
  background: var(--accent);
  padding: 0.55rem 0.9rem;
  border-radius: 2px;
  text-decoration: none;
  margin: 0.25rem 0.4rem 0.25rem 0;
}
.post-body .button:hover { background: var(--ink); }

/* Self-hosted video recovered from the [video] shortcode. */
.post-body video {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.75rem 0;
  background: #000;
  border-radius: 2px;
}

/* [themify_box] wrappers. */
.post-body .box {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1rem 1.1rem;
  margin: 1.75rem 0;
  background: #fff;
}

/* Galleries recovered from the old Themify builder. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
  margin: 1.75rem 0;
}
.gallery img { margin: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.image-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.image-compare img { margin: 0; }

/* ---------------------------------------------------------------- tags */
.post-tags { margin: 2rem 0 0; }
.tag {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.15rem 0.5rem;
  margin: 0 0.3rem 0.3rem 0;
}

/* --------------------------------------------------------- back to index */
/* Sits above the headline. Without it the only way out of a long post is the
   site title, which does not read as a link, or the footer nav far below. */
.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

/* ---------------------------------------------------------------- footer */
.post-nav {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 1.5rem;
}
.post-nav a, .site-footer {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.post-nav a { text-decoration: none; }
.post-nav a:hover { color: var(--accent); }

.site-footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

@media (max-width: 34rem) {
  .post-header h1 { font-size: 1.55rem; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .post-list-item.has-thumb { grid-template-columns: 4.5rem 1fr; gap: 0.85rem; }
  .site-header-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ==========================================================================
   Embedded video and standalone photos
   ========================================================================== */

/* Vimeo and YouTube iframes arrived from WordPress with fixed pixel sizes, one
   of them 1165px wide. The exporter strips those and puts the real ratio on this
   wrapper, so each video fills the column at its own shape. */
.post-body .embed {
  position: relative;
  width: 100%;
  margin: 2rem 0;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
}

.post-body .embed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Video wide enough to earn a break out of the text column, where the page
   allows it. */
@media (min-width: 52rem) {
  .post-body .embed,
  .post-body video {
    width: calc(100% + 6rem);
    margin-left: -3rem;
    margin-right: -3rem;
    max-width: none;
  }
}

/* A photo standing on its own in the text, rather than in a gallery grid. Same
   white mat as the gallery tiles so the page reads as one system. */
.post-body .photo-full {
  display: block;
  margin: 2rem 0;
  background: var(--frame, #fff);
  padding: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(28, 28, 26, 0.07);
  line-height: 0;
  text-decoration: none;
  transition: box-shadow 0.18s ease;
}
.post-body .photo-full:hover { box-shadow: 0 4px 14px rgba(28, 28, 26, 0.15); }
.post-body .photo-full:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.post-body .photo-full img { margin: 0; width: 100%; height: auto; border-radius: 1px; }

/* A lone image inside a paragraph should not inherit paragraph spacing on top of
   the figure's own margins. */
.post-body p > .photo-full { margin: 0; }
.post-body p:has(> .photo-full:only-child) { margin: 2rem 0; }

/* Captions read as captions, not body text. */
.post-body figure > figcaption,
.post-body .wp-element-caption {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 0.55rem;
  padding-left: 0.1rem;
  border-left: 0;
}

/* ==========================================================================
   Photo pages
   --------------------------------------------------------------------------
   These pages carry 15 to 20 photos each, stored as WordPress gallery blocks:
   a .wp-block-gallery wrapper around one nested <figure class="wp-block-image">
   per photo. Unstyled, every photo renders full width and the page becomes an
   endless column. Here they become a grid of framed thumbnails.
   ========================================================================== */

/* Give photo pages a wider column, but keep prose at a readable measure. */
body.page main { max-width: var(--measure-wide); }
body.page .post-body > p,
body.page .post-header { max-width: var(--measure); }

/* ------------------------------------------------------------ the gallery */
.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 2.25rem 0;
  padding: 0;
}

/* Each photo sits in a white frame with a hairline edge and a soft drop, so a
   light photo still reads as a distinct object against the warm paper. */
.wp-block-gallery > .wp-block-image,
.post-body > .wp-block-image {
  margin: 0;
  background: var(--frame);
  padding: 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(28, 28, 26, 0.07);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.wp-block-gallery > .wp-block-image:hover {
  box-shadow: 0 4px 14px rgba(28, 28, 26, 0.14);
  transform: translateY(-2px);
}

/* Uniform tiles keep the grid from going ragged with mixed orientations. */
.wp-block-gallery > .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 1px;
}

/* Each gallery photo is wrapped in a link to the full-size file, so the tile is
   a thumbnail and clicking it opens the original. The link must not pick up the
   usual body-link underline or colour. */
.wp-block-gallery .photo,
.post-body .gallery .photo {
  display: block;
  text-decoration: none;
  border: 0;
  line-height: 0;
}
.wp-block-gallery .photo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wp-block-gallery figcaption,
.post-body .wp-element-caption {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: left;
  margin: 0.5rem 0.1rem 0.1rem;
}

/* A single photo outside a gallery gets the same frame but keeps its shape. */
.post-body > .wp-block-image {
  display: block;
  margin: 2rem 0;
}
.post-body > .wp-block-image img {
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------- page navigation */
/* Four sibling pages, so show all of them and mark the current one, rather
   than making the reader go home and back out again. */
.page-nav {
  max-width: var(--measure-wide);
  margin: 3.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
}

.page-nav a,
.page-nav span {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.page-nav a:hover { color: var(--accent); border-color: var(--accent); }

/* The page you are on: no link, no underline, just weight. */
.page-nav span[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: transparent;
}

.page-nav .page-nav-home { margin-right: auto; }

@media (max-width: 34rem) {
  .wp-block-gallery {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.8rem;
  }
  .wp-block-gallery > .wp-block-image { padding: 0.35rem; }
}