@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

/* --------------------------------------------------------------------------
   Design tokens. One content width for every page, so the home hero, the card
   grids and the archive all share the same left and right edges as you scroll
   — they used to be 60rem, 68rem and 12% padding, which never lined up.
   -------------------------------------------------------------------------- */
:root {
  --container: 72rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Brand purple, deepened and pulled back from full saturation: the old
     #6305dd competed with the photographs instead of framing them. */
  --brand: #43148c;
  --brand-deep: #29085c;
  --brand-bar: #2c0d64;
}

* {
  box-sizing: border-box;
}

html {
  font-family: 'Open Sans', 'Lato', sans-serif;
}

body {
  margin: 0;
  /* A short page — an empty search, a tag with one post — used to leave the
     footer floating in the middle of the window with blank space under it. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page {
  flex: 1 0 auto;
}

h1,
h2,
h3 {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   Header. In the flow and sticky, not absolutely positioned: pages no longer
   need hand-tuned top margins to clear it (that was the cause of a 104px gap
   above the post hero), and it stays reachable while scrolling a long post.
   One background here rather than one per page, so it looks the same
   everywhere.
   -------------------------------------------------------------------------- */
#main-navigation {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
  padding: 0 var(--gutter);
  background-color: var(--brand-bar);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Where supported, let the page tint through — it keeps the homepage gradient
   readable behind the bar instead of cutting it off with a hard edge. */
@supports (backdrop-filter: blur(8px)) {
  #main-navigation {
    background-color: rgba(41, 8, 92, 0.85);
    backdrop-filter: blur(10px);
  }
}

.site-title {
  font-family: "Lato", sans-serif;
  /* Shrinks and ellipsises instead of forcing the header wider than the
     screen. With four nav items there is not room for a long blog name on a
     320px phone, and a page that scrolls sideways is worse than a clipped
     title — the name is still in the tab, and Home is right beside it. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Scales with the viewport so it stays the biggest thing in the bar without
     crowding the links on a phone. */
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: bold;
  letter-spacing: -0.01em;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

/* A colour shift rather than an underline — an underline under a large title
   looked heavy, and the title is obviously a link from its position. */
.site-title:hover {
  color: #e9c9fb;
}

/* Keyboard users still need a visible focus indicator. */
.site-title:focus-visible {
  outline: 3px solid #cf79f1;
  outline-offset: 4px;
  border-radius: 4px;
}

#main-navigation nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* The links keep their size; the title gives way instead. */
  flex-shrink: 0;
}

#main-navigation nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 4rem;
  padding: 0 0.65rem;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

#main-navigation nav a:hover,
#main-navigation nav a:focus-visible {
  color: #e9c9fb;
  outline: none;
}

/* Underline marks the section you are in. */
#main-navigation nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.85rem;
  height: 3px;
  border-radius: 2px;
  background-color: #cf54a6;
}

.nav-label--short {
  display: none;
}

/* Available to screen readers, invisible on screen. Used for form labels that
   would otherwise duplicate a placeholder or an icon's accessible name. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Search: an icon that expands, once JavaScript has collapsed the form. */
.nav-search__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  color: white;
  cursor: pointer;
}

.nav-search__toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-search__toggle:hover,
.nav-search__toggle:focus-visible {
  background-color: rgba(255, 255, 255, 0.32);
  outline: none;
}

.nav-search {
  display: flex;
  gap: 0.35rem;
}

/* Only hidden once the script has run, so a scriptless visitor keeps a plain
   working search box. */
.js-nav .nav-search {
  display: none;
}

.js-nav .nav-search--open {
  display: flex;
}

/* Once the field is open the icon has nothing left to do, and two controls
   side by side read as clutter. Hidden rather than removed so the button keeps
   its place in the tab order when the field closes again. */
.js-nav .nav-search--open + .nav-search__toggle,
.js-nav .nav-search__toggle[aria-expanded="true"] {
  display: none;
}

.nav-search input {
  font: inherit;
  padding: 0.4rem 0.7rem;
  border: none;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.94);
  width: 10rem;
}

.nav-search input:focus-visible,
.search-form input:focus-visible {
  outline: 3px solid #cf79f1;
  outline-offset: 1px;
}

.nav-search button {
  font: inherit;
  font-weight: bold;
  padding: 0.4rem 0.85rem;
  border: none;
  border-radius: 8px;
  background-color: #cf54a6;
  color: white;
  cursor: pointer;
}

.nav-search button:hover,
.nav-search button:focus-visible {
  background-color: #a83b83;
  outline: none;
}

/* Flash messages */
.messages {
  list-style: none;
  margin: 1.5rem auto 0 auto;
  padding: 0;
  width: 90%;
  max-width: 60rem;
  display: block;
}

.message {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-weight: bold;
  background-color: #ede1fb;
  color: var(--brand-deep);
  border-left: 5px solid #5706c0;
}

.message--error {
  background-color: #fbe1e1;
  color: #7a0b0b;
  border-left-color: #b81b1b;
}

/* Tag pills that link through to the tag archive */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0 2rem 0;
}

a.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background-color: #5706c0;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: bold;
}

a.tag:hover,
a.tag:active {
  background-color: var(--brand-deep);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 3rem 0;
  font-weight: bold;
}

.pagination a {
  color: #5706c0;
  text-decoration: none;
}

.pagination a:hover,
.pagination a:active {
  color: #cf54a6;
}

.pagination__disabled {
  color: #9d9d9d;
}

.pagination__status {
  color: #2e2e2e;
  font-weight: normal;
}

/* Search page */
.search-form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.search-form input {
  font: inherit;
  padding: 0.6rem 0.9rem;
  border: 1px solid #c3c3c3;
  border-radius: 8px;
  width: min(24rem, 70vw);
}

.search-form button {
  font: inherit;
  font-weight: bold;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 8px;
  background-color: #5706c0;
  color: white;
  cursor: pointer;
}

.search-form button:hover,
.search-form button:active {
  background-color: var(--brand-deep);
}

.search-summary {
  text-align: center;
  color: #4a4a4a;
}

/* Rendered markdown body */
.post-body {
  /* Spans the full card, matching the hero and the gallery either side of it. */
  font-size: 1.06rem;
  line-height: 1.75;
}

.post-body h1,
.post-body h2,
.post-body h3 {
  margin-top: 2rem;
  color: #2e2e2e;
}

.post-body a {
  color: #5706c0;
}

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.post-body pre {
  background-color: #2e2e2e;
  color: #f4f4f4;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
}

.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
}

.post-body :not(pre) > code {
  background-color: #ede1fb;
  color: var(--brand-deep);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.post-body blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1.25rem;
  border-left: 4px solid #5706c0;
  color: #4a4a4a;
  font-style: italic;
}

.post-body table {
  border-collapse: collapse;
  width: 100%;
}

.post-body th,
.post-body td {
  border: 1px solid #d5d5d5;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* Small shared bits */
.post__meta {
  color: #6b6b6b;
  font-size: 0.85rem;
  margin: 0.25rem 0 0.5rem 0;
}

.empty-state {
  text-align: center;
  color: #6b6b6b;
  font-style: italic;
  padding: 1.5rem 0;
}

.section-link {
  text-align: center;
  margin-top: 2rem;
}

.section-link a {
  color: #5706c0;
  font-weight: bold;
  text-decoration: none;
}

.author-bio {
  max-width: 40rem;
  margin: 0 auto 2rem auto;
  text-align: center;
  color: #4a4a4a;
}

.comment-meta {
  color: #6b6b6b;
  font-size: 0.85rem;
}

.field-error {
  color: #b81b1b;
  margin: 0.25rem 0 0 0;
  font-size: 0.9rem;
}

.form-errors {
  color: #b81b1b;
  font-weight: bold;
}

.draft-banner {
  margin: 1.5rem auto 0 auto;
  width: 90%;
  max-width: 60rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background-color: #fff4d6;
  color: #7a5600;
  border-left: 5px solid #d1a000;
  font-weight: bold;
}

.inline-form {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.75rem;
  color: #b81b1b;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.simple-page {
  margin: 4rem auto;
  width: 90%;
  max-width: 40rem;
  text-align: center;
}

.simple-page a {
  color: #5706c0;
  font-weight: bold;
}

/* The footer closes the page with a change of background rather than a rule.
   A border here sat 4rem below the about panel's own edge, so the bottom of
   the home page had two horizontal lines with a sliver of white between them.
   Against the grey body on every other page the tone change reads clearly on
   its own. */
.site-footer {
  margin-top: 4rem;
  padding: 2.75rem var(--gutter) 2.25rem var(--gutter);
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  background-color: #f5f2ed;
}

/* On the home page the footer goes white against the about panel's cream. The
   change of tone is the separator, so no gap and no rule are needed — the
   earlier hairline was there only because the two blocks shared a colour.
   Keyed off a body class rather than an adjacent-sibling selector, because the
   page content now sits inside a wrapper. */
.has-about .site-footer {
  margin-top: 0;
  background-color: white;
}

.site-footer .social {
  /* Spacing alone separates this from the copyright. A rule here was invisible
     anyway: the page background behind the footer is already grey. */
  margin-bottom: 1.5rem;
}

.site-footer a {
  color: #5706c0;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
}

.site-footer__sep {
  margin: 0 0.4rem;
  color: #b3b3b3;
}

/* --------------------------------------------------------------------------
   Photo credits. A reference list rather than something to read through, so
   it stays narrow, quiet and out of the way of the posts themselves.
   -------------------------------------------------------------------------- */

#credits {
  max-width: 46rem;
  margin: 6.5rem auto 3rem;
  padding: 0 1.5rem;
}

#credits h1 {
  margin-bottom: 0.5rem;
  color: #3a3a3a;
}

.credits__intro {
  margin-bottom: 2.5rem;
  color: #6b6b6b;
  line-height: 1.6;
}

.credits__group {
  margin-bottom: 2rem;
}

.credits__group h2 {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.credits__group h2 a {
  color: #3a3a3a;
  text-decoration: none;
}

.credits__group h2 a:hover,
.credits__group h2 a:focus-visible {
  color: #5706c0;
}

.credits__group ul {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}

.credits__group li {
  margin-bottom: 0.35rem;
  color: #6b6b6b;
  font-size: 0.88rem;
  line-height: 1.5;
  /* Commons filenames are long and unbreakable; let them wrap on phones. */
  overflow-wrap: anywhere;
}

.credits__group li a {
  color: #5706c0;
  text-decoration: none;
}

.credits__group li a:hover,
.credits__group li a:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Very narrow phones. Four nav items plus the site title overflowed a 320px
   screen once Home was added, so the links tighten up rather than the Home
   link being dropped — it is the one someone unfamiliar with the site needs
   most.
   -------------------------------------------------------------------------- */
@media (max-width: 23.5rem) {
  #main-navigation {
    gap: 0.35rem;
    padding: 0 0.5rem;
  }

  #main-navigation nav {
    gap: 0;
  }

  #main-navigation nav a {
    padding: 0 0.3rem;
    font-size: 0.85rem;
  }

  #main-navigation nav a.is-active::after {
    left: 0.3rem;
    right: 0.3rem;
  }

  .nav-search__toggle {
    width: 2.1rem;
    height: 2.1rem;
  }

  .site-title {
    font-size: 0.95rem;
  }
}

/* --------------------------------------------------------------------------
   Phones and small tablets. The desktop header is absolutely positioned over
   each page's coloured hero; here it sits in the flow instead, which means it
   needs a background of its own — without one the white text landed on the
   white homepage and vanished.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Phones. The header stays a single row — three stacked rows took 161px, a
   fifth of the screen, before any content.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  #main-navigation {
    height: 3.5rem;
    padding: 0 0.9rem;
    gap: 0.5rem;
  }

  #main-navigation nav {
    gap: 0.15rem;
  }

  #main-navigation nav a {
    height: 3.5rem;
    padding: 0 0.45rem;
    font-size: 0.95rem;
  }

  #main-navigation nav a.is-active::after {
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.6rem;
  }

  /* "All Posts" / "Stored Posts" are too wide for one row at 320px. */
  .nav-label--full {
    display: none;
  }

  .nav-label--short {
    display: inline;
  }

  .nav-search__toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Expanded, the field takes the width it needs on its own line below. */
  .js-nav .nav-search--open {
    position: absolute;
    top: 3.5rem;
    left: 0;
    right: 0;
    padding: 0.6rem 0.9rem;
    background-color: var(--brand-deep);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }

  .nav-search input {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 2.75rem;
  }

  .nav-search button {
    min-height: 2.75rem;
  }

  .messages,
  .draft-banner {
    margin-top: 1rem;
    width: calc(100% - 2.5rem);
  }

  #gallery {
    padding: 1rem;
    margin: 1.5rem auto;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .gallery-item img {
    height: 13rem;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 2rem 0;
  }

  .pagination a,
  .pagination__disabled {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .search-form {
    flex-wrap: wrap;
  }

  .search-form input,
  .search-form button {
    width: 100%;
    min-height: 2.75rem;
  }

  .site-footer {
    margin-top: 2.5rem;
    padding: 1.5rem 1.25rem;
  }
}

/* Wide content inside a post body must scroll in its own box rather than
   pushing the page sideways. */
.post-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.post-body pre,
.codehilite {
  max-width: 100%;
}

/* Long URLs in body copy shouldn't widen the page either. */
.post-body a {
  overflow-wrap: break-word;
}

/* The post-detail hero shares the tag pill's purple, so give the pills and the
   excerpt enough contrast to read against it. */
#summary > p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 44rem;
}

#summary a.tag {
  background-color: rgba(255, 255, 255, 0.22);
  color: white;
}

#summary a.tag:hover,
#summary a.tag:active {
  background-color: rgba(255, 255, 255, 0.38);
}

#summary .tags {
  justify-content: flex-start;
  /* Spacing here comes from .summary__main's gap; the shared .tags margins
     would stack on top of it. */
  margin: 0;
}

/* Current tag on a tag archive page */
a.tag--active {
  background-color: #cf54a6;
}

a.tag--active:hover,
a.tag--active:active {
  background-color: #a83b83;
}

/* Gallery on a post page */
#gallery {
  width: calc(100% - (2 * var(--gutter)));
  max-width: var(--container);
  margin: 3rem auto;
  background-color: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#gallery h2 {
  margin-top: 0;
  color: #2e2e2e;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.gallery-item {
  margin: 0;
}

.gallery-item img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  background-color: #ede1fb;
  transition: transform 0.2s ease;
  cursor: zoom-in;
}

.gallery-item img:hover {
  transform: scale(1.02);
}

.gallery-item figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #5a5a5a;
  line-height: 1.4;
}

/* Spam honeypot: off-screen rather than display:none, which some bots skip. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-help {
  margin: 0.25rem 0 0 0;
  font-size: 0.85rem;
  color: #6b6b6b;
}

/* Lightbox: full-screen photo viewer with previous/next on either side. */
body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background-color: rgba(20, 4, 40, 0.92);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: min(90rem, 100%);
  max-height: 100%;
}

.lightbox__image {
  max-width: 100%;
  /* Leaves room for the caption under the photo. */
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  border-radius: 8px;
  background-color: #1b0730;
}

.lightbox__caption {
  color: #e9e2f5;
  text-align: center;
  font-size: 0.95rem;
  max-width: 44rem;
  line-height: 1.4;
}

.lightbox__nav,
.lightbox__close {
  flex: none;
  background-color: rgba(255, 255, 255, 0.14);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease;
}

.lightbox__nav {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 2.25rem;
}

.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
}

.lightbox__nav:hover,
.lightbox__close:hover,
.lightbox__nav:focus-visible,
.lightbox__close:focus-visible {
  background-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.lightbox__nav[hidden] {
  display: none;
}

@media (max-width: 48rem) {
  .lightbox {
    gap: 0.35rem;
    padding: 0.75rem;
  }

  .lightbox__nav,
  .lightbox__close {
    /* Keep the controls thumb-sized even on the narrowest screens. */
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.75rem;
  }

  .lightbox__close {
    top: 0.75rem;
    right: 0.75rem;
  }

  .lightbox__image {
    max-height: calc(100vh - 10rem);
  }
}

.gallery-hint {
  margin: 1rem 0 0 0;
  font-size: 0.85rem;
  color: #6b6b6b;
}

/* Social profile links (footer, and the homepage bio) */
.social__heading {
  margin: 0 0 0.75rem 0;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* #8a8a8a only managed 3.1:1 against the footer's cream, short of the 4.5:1
     WCAG AA wants for text this size. */
  color: #5f5f5f;
}

.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

/* Round icon buttons rather than word pills: the glyphs are recognisable at a
   glance and take much less room in the footer. The label stays in the markup
   for screen readers and as the hover title. */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  /* #c9b8e8 managed only 1.8:1 against the footer, so the ring all but
     vanished. This clears the 3:1 WCAG asks of a UI boundary on both the
     white home footer and the cream one elsewhere. */
  border: 1px solid #9b7ecf;
  background-color: white;
  color: #5706c0;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.social-link__icon {
  display: block;
}

.social-link:hover,
.social-link:focus-visible {
  background-color: #5706c0;
  border-color: #5706c0;
  color: white;
  outline: none;
}

.social-link:focus-visible {
  outline: 3px solid #cf79f1;
  outline-offset: 3px;
}

@media (max-width: 48rem) {
  .social-link {
    /* Comfortable tap target alongside the other mobile controls. */
    width: 2.75rem;
    height: 2.75rem;
  }

}

/* Back to the list, above the post hero */
/* The header is in the flow now, so this is plain spacing rather than
   clearance for something floating above it. */
.back-link {
  width: calc(100% - (2 * var(--gutter)));
  max-width: var(--container);
  margin: 1.5rem auto 0.75rem auto;
}

.back-link a {
  color: #5706c0;
  font-weight: bold;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
}

.back-link a:hover,
.back-link a:focus-visible {
  color: #cf54a6;
}

/* "Keep reading" — the neighbouring posts at the end of an article. Styled as
   a panel like #gallery and #comments so it belongs to the page rather than
   floating between sections. A missing neighbour is omitted entirely; an empty
   placeholder just looked broken. */
#post-nav {
  width: calc(100% - (2 * var(--gutter)));
  max-width: var(--container);
  margin: 3rem auto;
  padding: 1.5rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#post-nav h2 {
  margin: 0 0 1.25rem 0;
  color: #2e2e2e;
  font-size: 1.5rem;
}

.post-nav__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.post-nav__card {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  border: 1px solid #e2dced;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: #2e2e2e;
  background-color: white;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.post-nav__card:hover,
.post-nav__card:focus-visible {
  transform: translateY(-2px);
  border-color: #c9b8e8;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  outline: none;
}

.post-nav__card img {
  flex: none;
  width: 6.5rem;
  height: 100%;
  min-height: 6rem;
  object-fit: cover;
  background-color: #ede1fb;
}

/* Mirror the older card so the artwork sits on the side the arrow points to. */
.post-nav__card--older {
  flex-direction: row-reverse;
  text-align: right;
}

.post-nav__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.9rem 1.1rem;
}

.post-nav__dir {
  font-size: 0.72rem;
  font-weight: bold;
  color: #5706c0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-nav__title {
  font-weight: bold;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.post-nav__date {
  font-size: 0.8rem;
  color: #6b6b6b;
  font-style: italic;
}

#post-nav .section-link {
  margin: 1.25rem 0 0 0;
}

@media (max-width: 48rem) {
  .back-link {
    width: calc(100% - 2.5rem);
    margin: 1rem auto 0.5rem auto;
  }

  #post-nav {
    width: calc(100% - 2.5rem);
    margin: 2rem auto;
    padding: 1.25rem;
  }

  .post-nav__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Both cards read left-to-right on a narrow screen; mirroring them there
     just makes the titles harder to scan. */
  .post-nav__card--older {
    flex-direction: row;
    text-align: left;
  }

  .post-nav__card img {
    width: 5.5rem;
    min-height: 5.5rem;
  }
}

/* width/height attributes are there so the browser can reserve space before an
   image loads (no layout shift). The CSS box still governs the rendered size. */
.post img,
.gallery-item img,
.post-nav__card img,
#summary article img {
  max-width: 100%;
}