/*!
Theme Name: SF Neighborhoods United
Theme URI: https://sanfrancisconeighborhoodsunited.org/
Author: Andy Fields
Description: The San Francisco Neighborhoods United site, converted from the hand-built static original. Same markup, same stylesheet, plus a comment area in the site's own style.
Version: 1.8.2
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: sfnu
Tags: blog, one-column, custom-menu, threaded-comments, accessibility-ready
*/

/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

:root {
  /* rgb(78, 52, 29) — every piece of text on the site, and the rules. */
  --ink: #4e341d;
  --rule: #cec7bf;

  /* rgb(255, 255, 255) — shared by the header, body and footer. */
  --page-bg: #fff;

  /* rgb(240, 238, 236) — panels set off from the white page. */
  --panel-bg: #f0eeec;

  /* rgb(230, 228, 226) — the margins either side of the body's text column. */
  --margin-bg: #e6e4e2;

  /* Maximum page width; the page centres itself on wider screens. */
  --max-width: 1000px;
  --gutter: 1.25rem;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;

  /* Sticky footer: main grows to push the footer to the bottom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/*
 * The margins either side of the text column are grey, so main carries the
 * grey and its .wrap paints the column itself back to the page colour. The
 * vertical padding belongs to .wrap rather than main so the white runs the
 * full height of the column, and .wrap stretches to fill main when the page
 * is short. The header and footer are left alone: they stay white edge to
 * edge.
 */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--margin-bg);
}

main > .wrap {
  flex: 1 0 auto;
  background: var(--page-bg);
  padding-block: 2.5rem 4rem;
}

/*
 * Large screens: pin the header and footer, and scroll only the content
 * between them. The height condition keeps this off phones in landscape,
 * where a fixed header and footer would leave almost nothing to read.
 * Small screens keep the ordinary whole-page scroll.
 */
@media only screen and (min-width: 48em) and (min-height: 40em) {
  body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .site-header,
  .site-footer {
    flex-shrink: 0;
  }

  main {
    /* min-height lets the flex item shrink below its content, which is what
       makes it scroll instead of pushing the footer off-screen. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/*
 * The one page column. The header, footer and content all use it, so the
 * header title, body text and footer title share the same left edge, and the
 * navigation and email address share the same right edge.
 */
.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Header ------------------------------------------------------------ */

.site-header {
  background: var(--page-bg);
  padding-block: 1.75rem;

  /* Header shares the body colour, so a rule provides the separation. */
  border-bottom: 3px solid var(--ink);
}

/* Title on the left, navigation on the right, always on one line. */
.site-header .wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
}

/* Title with the tagline stacked beneath it. Takes the leftover width, so the
   title wraps onto more lines rather than pushing the navigation off the row. */
.site-branding {
  flex: 1 1 auto;
}

.site-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.site-tagline {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
}

.site-tagline a {
  color: var(--ink);
  text-decoration: underline;
}

.site-nav {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
}

.nav-link {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible {
  text-decoration: underline;
}

/* The link for the page you are already on. */
.nav-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* --- Page content ------------------------------------------------------ */

.page-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.6875rem, 4.5vw, 2.25rem);
  line-height: 1.2;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.375rem;
  line-height: 1.25;
}

/*
 * Deeper headings, used where a quoted document carries its own sections.
 * Browsers default these to equal space above and below, which leaves a
 * heading floating between two paragraphs instead of belonging to the one
 * underneath it; these follow the h2 shape of generous above, tight below.
 */
.prose h3 {
  margin: 1.75rem 0 0.625rem;
  font-size: 1.1875rem;
  line-height: 1.3;
}

.prose h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

/* Standfirst line directly under a post title. */
.post-subtitle {
  margin: -0.75rem 0 0.75rem;
  font-size: clamp(1.25rem, 2.75vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
}

/*
 * Aside to the reader, set apart from the body copy by being centred. Scoped
 * to .prose so the centring margin wins over the paragraph rule below.
 *
 * It runs wider than a normal paragraph so the note fits on two lines on a
 * full-width screen, and the type scales with the viewport to hold those two
 * lines down to about a 700px window before the floor stops it shrinking.
 */
.prose .post-note {
  margin: 1.5rem auto;
  max-width: 58rem;
  font-size: clamp(0.9375rem, 1.95vw, 1.1875rem);
  font-style: italic;
  font-weight: 700;
  text-align: center;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--rule);
}

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

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.125rem;
}

/* Links share the text colour, so they stay underlined to remain identifiable. */
.prose a,
.post-excerpt a,
.back-link a {
  color: var(--ink);
  text-decoration: underline;
}

/* --- Blog index -------------------------------------------------------- */

.post-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Thumbnail on the left, summary text on the right. */
.post-summary {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 3px solid var(--rule);
}

.post-summary:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.post-summary-thumb {
  flex: 0 0 9rem;
  display: block;
}

.post-summary-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.post-summary-body {
  /* min-width lets long words wrap instead of stretching the flex item. */
  flex: 1 1 auto;
  min-width: 0;
}

/* Narrow screens: thumbnail above the text rather than beside it. */
@media only screen and (max-width: 34em) {
  .post-summary {
    flex-direction: column;
    gap: 1rem;
  }

  .post-summary-thumb {
    flex-basis: auto;
    max-width: 12rem;
  }
}

.post-summary-title {
  margin: 0 0 0.25rem;
  font-size: 1.375rem;
  line-height: 1.25;
}

.post-summary-title a {
  color: var(--ink);
  text-decoration: none;
}

.post-summary-title a:hover,
.post-summary-title a:focus-visible {
  text-decoration: underline;
}

.post-meta {
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

.post-excerpt {
  margin: 0 0 0.75rem;
}

.read-more {
  color: var(--ink);
  font-weight: 600;
}

.empty-state {
  margin: 0;
  color: var(--ink);
  font-style: italic;
}

.back-link {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* --- Images inside a post ---------------------------------------------- */

/*
 * Base figure rules come first; every --modifier below relies on being later
 * in the file to win, since they share the same specificity.
 */
.post-figure {
  margin: 1.75rem 0;
}

.post-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.post-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-style: italic;
}

/* Tall images would otherwise fill the screen at the full column width. */
.post-figure--portrait {
  max-width: var(--fig-w, 13rem);
  margin-inline: auto;
  text-align: center;
}

/* Centred and narrower than the column; set --fig-w to override the default. */
.post-figure--narrow {
  max-width: var(--fig-w, 19.5rem);
  margin-inline: auto;
}

/*
 * A figure held at its image's own pixel size, centred in the column.
 *
 * The evidence screenshots on the supporting pages are around 500px wide and
 * the text column is nearly twice that. Stretched to fill it they turn to mush,
 * and the small print in them is the entire point of showing them. On a narrow
 * screen max-width still brings them down to fit.
 */
.post-figure--natural {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.post-figure--natural img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Small lead image, centred under the post title; set --fig-w to override. */
.post-figure--lead {
  max-width: var(--fig-w, 16rem);
  margin-inline: auto;
}

/* Image on the left with its caption alongside, wrapping under on narrow screens. */
.post-figure--side {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}

/* Per-figure width: set --fig-w on the figure to override the default. */
.post-figure--side img {
  flex: 0 1 var(--fig-w, 32rem);
  width: var(--fig-w, 32rem);
  max-width: 100%;
}

.post-figure--side figcaption {
  flex: 1 1 12rem;
  margin-top: 0;
}

/*
 * Two photos side by side, each wrapping onto its own row once the column is
 * too narrow to hold both. Markup: <figure class="post-figure-row"> around two
 * images and one figcaption. Set --fig-min to change the width they stack at.
 */
.post-figure-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.75rem 0;
}

/*
 * Grow to share the row evenly, then wrap rather than shrink past --fig-min.
 * min-width overrides the intrinsic floor a flex item gets by default, which
 * would otherwise hand a wider source file a wider share of the row.
 */
.post-figure-row img {
  flex: 1 1 var(--fig-min, 16rem);
  display: block;
  min-width: 0;
  /* Never past the narrower source file's own size, or it would be upscaled. */
  max-width: min(100%, var(--fig-max, 26rem));
  height: auto;
}

/*
 * A full-width line of its own, so it sits centred under both photos when they
 * share a row and under the lower one once they stack.
 */
.post-figure-row figcaption {
  flex: 1 1 100%;
  margin-top: -0.25rem;
  font-size: 0.9375rem;
  font-style: italic;
  text-align: center;
}

/* --- Embedded video inside a post -------------------------------------- */

/*
 * Wrapper around an embedded player. The 16:9 box keeps the player the right
 * shape at any width; set --fig-w to cap how wide it gets.
 */
.post-video {
  max-width: var(--fig-w, 32rem);
  margin: 1.75rem auto;
}

.post-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.post-video figcaption {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-style: italic;
}

/*
 * Light grey panel setting a passage off from the white page background. Full
 * width on phones and tablets; narrower and centred once there is room for it.
 */
.post-panel {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--panel-bg);
  /* The panel is narrow, so a bare URL has to be able to wrap mid-word. */
  overflow-wrap: break-word;
}

/* Specific enough to beat the element margins the panel's contents carry. */
.prose .post-panel > :first-child {
  margin-top: 0;
}

.prose .post-panel > :last-child {
  margin-bottom: 0;
}

@media only screen and (min-width: 48em) {
  .post-panel {
    width: 60%;
    margin-inline: auto;
  }
}

/*
 * A document reproduced in full, as opposed to a short pull-out: the same grey
 * panel, but running the whole width of the column. The 60% above suits a
 * sentence or two; several hundred words of a quoted letter set in a narrow
 * strip is a hard read. The quote rule stays on the left edge so the passage
 * still reads as quoted rather than as an aside.
 */
.prose blockquote.post-panel {
  width: auto;
  margin-inline: 0;
  padding: 1.25rem 1.5rem;
}

/*
 * Two or three headline figures set off from the body copy by hairline rules
 * rather than a filled panel, so the page background carries straight through.
 * Markup: <dl class="stat-pair"> with a <div> wrapping each <dt>/<dd> pair.
 */
.stat-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 3rem;
  margin: 1.75rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

/* Each pair is its own column, so the dt/dd order below applies within a pair. */
.stat-pair > div {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
}

/* The figure leads, so it comes first visually even though <dt> is the label. */
.stat-pair dt {
  order: 2;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* The label is supporting detail; lighten it without losing legibility. */
  opacity: 0.75;
}

.stat-pair dd {
  order: 1;
  margin: 0 0 0.25rem;
  /* Tabular figures keep the two numbers aligned digit for digit. */
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1875rem, 3.35vw, 1.5rem);
  line-height: 1.1;
}

/* A thin black rule around the image, for screenshots that need an edge. */
.post-figure--framed img {
  border: 1px solid #000;
}

/*
 * Image on the left with ordinary body copy on the right — not a figure, so
 * the text keeps the normal paragraph styling rather than caption italics.
 */
.media-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 1.75rem 0;
}

.media-split > img {
  flex: 0 1 16rem;
  width: 16rem;
  max-width: 100%;
  display: block;
  height: auto;
}

.media-split-body {
  flex: 1 1 14rem;
  min-width: 0;
}

.media-split-body > :first-child {
  margin-top: 0;
}

.media-split-body > :last-child {
  margin-bottom: 0;
}

/* Centres the title, subtitle, date and lead image of a post. */
.post--centered-head .page-title,
.post--centered-head .post-subtitle,
.post--centered-head .post-meta {
  text-align: center;
}


/* --- Footer ------------------------------------------------------------ */

.site-footer {
  flex-shrink: 0;

  padding-block: 2rem;
  border-top: 3px solid var(--ink);
  background: var(--page-bg);
}

/* Title on the left, email address on the right, always on one line. */
.site-footer .wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
}

.footer-title {
  flex: 1 1 auto;
  margin: 0;

  /* Deliberately smaller than the header title. */
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

.footer-contact {
  flex: 0 1 auto;
  margin: 0;
  font-size: 0.9375rem;
  text-align: right;
}

.footer-contact a {
  color: var(--ink);

  /* Long address must not overflow narrow phones. */
  overflow-wrap: anywhere;
}

/* --- Click a photo to see it full size --------------------------------- */

/* Added by js/app.js, so nothing invites a click when scripting is off. */
.is-zoomable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgb(0 0 0 / 85%);
  cursor: zoom-out;
}

/* Sized against the viewport, never a percentage of the flex parent, which
   would make the image's size depend on a box sized by the image. */
.lightbox img {
  display: block;
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
}

/* The page behind must not scroll while an image is open. */
.has-lightbox {
  overflow: hidden;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  /*
   * The boilerplate printed every link's URL after its text with
   * a[href]::after. Removed — printed pages show the link text only.
   */

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}



/* ==========================================================================
   WordPress additions

   Small rules the static site never needed, because it had no linked site
   title and no comment area.
   ========================================================================== */

/* On inner pages the site title links home. It must not pick up default link
   styling — the original is plain text in the same ink as everything else. */
.site-title a {
  color: inherit;
  text-decoration: none;
}

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


/* --- The admin bar and the pinned footer -------------------------------- */

/*
 * When you are logged in, WordPress adds a fixed 32px admin bar and pushes the
 * document down with `html { margin-top: 32px }`. The pinned layout still sizes
 * the body to a full 100dvh, so the page ends up 32px taller than the window —
 * and because that layout sets `overflow: hidden`, the overflowing strip cannot
 * be scrolled to. What lands in it is the bottom of the footer, so the footer
 * text appears jammed against the bottom edge with its padding cut off.
 *
 * Subtracting the admin bar's own height fixes it. WordPress publishes that
 * height as a custom property (and updates it to 46px on small screens); the
 * 0px fallback means logged-out visitors are completely unaffected.
 */
@media only screen and (min-width: 48em) and (min-height: 40em) {
  body {
    /* min-height has to come down too — the sticky-footer rule sets it to a
       full 100vh, which would otherwise win over the reduced height below and
       leave the page its original, too-tall size. */
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
  }
}

/* --- WordPress embed blocks -------------------------------------------- */

/*
 * Videos are WordPress embed blocks rather than the hand-written
 * <figure class="post-video"> of the static site, because WordPress strips
 * raw <iframe> tags from post content. These rules give the block the same
 * width, centring and caption treatment .post-video had, so the two are
 * indistinguishable on the page.
 */
.prose .wp-block-embed,
.prose .wp-block-video {
  max-width: var(--fig-w, 32rem);
  margin: 1.75rem auto;
}

.wp-block-embed__wrapper {
  position: relative;
}

.wp-block-embed iframe,
.wp-block-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-element-caption {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-style: italic;
  text-align: left;
}

/* A post head that centres its title must not centre the captions with it. */
.post--centered-head .wp-block-embed figcaption {
  text-align: left;
}

/* ==========================================================================
   Comments

   Added for the WordPress version of the site. Everything above this point is
   the original stylesheet, unchanged. These rules reuse the same custom
   properties, type scale and rule weights so the discussion reads as part of
   the page rather than a panel bolted onto the bottom of it.
   ========================================================================== */

.comments {
  margin-top: 3rem;
  padding-top: 2rem;

  /* Echoes the rule under the site header, so the discussion reads as a
     distinct region of the page rather than more of the article. */
  border-top: 3px solid var(--ink);
}

.comments-title,
.comment-reply-title {
  margin: 0 0 1.5rem;
  font-size: 1.375rem;
  line-height: 1.25;
}

.comment-reply-title small {
  margin-left: 0.75rem;
  font-size: 1rem;
  font-weight: 400;
}

/* --- The thread --------------------------------------------------------- */

.comment-list,
.comment-list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment-item {
  margin: 0;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}

.comment-list > .comment-item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Replies step in, with a rule carrying the eye down the nesting. */
.comment-list .children {
  margin-top: 1.5rem;
  margin-left: 1.25rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--rule);
}

.comment-list .children .comment-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.comment-head {
  margin-bottom: 0.5rem;
}

.comment-author {
  margin: 0;
  font-weight: 700;
}

.comment-author a {
  color: var(--ink);
  text-decoration: underline;
}

/* The date sits quieter than the name without dropping below contrast. */
.comment-meta-line {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  opacity: 0.75;
}

.comment-text > :first-child {
  margin-top: 0;
}

.comment-text > :last-child {
  margin-bottom: 0;
}

.comment-text p,
.comment-text ul,
.comment-text ol {
  margin: 0 0 1.125rem;
}

.comment-text a {
  color: var(--ink);
  text-decoration: underline;
}

.comment-awaiting {
  margin: 0 0 0.75rem;
  font-style: italic;
  opacity: 0.75;
}

.comment-actions {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
}

.comment-actions a,
.comments-closed {
  color: var(--ink);
}

.comment-actions a {
  font-weight: 600;
  text-decoration: none;
}

.comment-actions a:hover,
.comment-actions a:focus-visible {
  text-decoration: underline;
}

.comments-closed {
  margin: 1.5rem 0 0;
  font-style: italic;
  opacity: 0.75;
}

/* --- The form ----------------------------------------------------------- */

.comment-respond {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--panel-bg);
}

.comment-list + .comment-respond,
.comment-list .comment-respond {
  margin-top: 2rem;
}

.comment-form p {
  margin: 0 0 1.125rem;
}

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

.comment-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--page-bg);
  color: var(--ink);

  /* Inputs do not inherit type by default, and 1rem keeps iOS from zooming
     the page when a field takes focus. */
  font: inherit;
  font-size: 1rem;
}

.comment-form textarea {
  display: block;
  resize: vertical;
  line-height: 1.6;
}

.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* Name, email and website sit side by side once there is room for them. */
@media only screen and (min-width: 40em) {
  .comment-form-author,
  .comment-form-email,
  .comment-form-url {
    display: inline-block;
    width: calc(50% - 0.5rem);
    vertical-align: top;
  }

  .comment-form-author,
  .comment-form-url {
    margin-right: 0.75rem;
  }
}

.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.comment-form-cookies-consent label {
  margin-bottom: 0;
  font-weight: 400;
}

.comment-form-cookies-consent input {
  margin-top: 0.3rem;
}

.comment-submit {
  padding: 0.65rem 1.4rem;
  border: 0;
  background: var(--ink);
  color: var(--page-bg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.comment-submit:hover,
.comment-submit:focus-visible {
  opacity: 0.85;
}

.comment-submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.logged-in-as,
.comment-notes {
  font-size: 0.9375rem;
}

.logged-in-as a,
.comment-notes a {
  color: var(--ink);
  text-decoration: underline;
}

.must-log-in {
  margin: 0;
}

/* --- Pagination --------------------------------------------------------- */

.pagination,
.comments-pagination {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-weight: 600;
}

.comments-pagination {
  margin-top: 2rem;
}

.pagination .nav-links,
.comments-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
}

.pagination a,
.comments-pagination a {
  color: var(--ink);
  text-decoration: none;
}

.pagination a:hover,
.pagination a:focus-visible,
.comments-pagination a:hover,
.comments-pagination a:focus-visible {
  text-decoration: underline;
}

.pagination .current,
.comments-pagination .current {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* The pinned-header layout scrolls main; a long thread must not be clipped. */
@media only screen and (min-width: 48em) and (min-height: 40em) {
  .comments {
    scroll-margin-top: 1rem;
  }
}