/* ==========================================================================
   Journal — index page (page-templates/blog.php)
   Loaded only on the Blog template. Tokens come from theme.css.
   ========================================================================== */

.blog-index {
  padding: 56px 0 88px;
}

/* -------------------------------------------------------------------------- */
/* Page head                                                                  */
/* -------------------------------------------------------------------------- */

/* Centred and narrow. The index is a reading surface, not a shelf, so the
   opening block behaves like the top of an article rather than a shop header. */
.blog-index__head {
  max-width: 660px;
  margin: 0 auto 56px;
  text-align: center;
}

.blog-index__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-primary);
}

.blog-index__intro {
  margin-top: 18px;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}

.blog-index__paged {
  margin-top: 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* A hairline under the head, gold at its centre and fading out — the same
   editorial rule the homepage sections use to close a heading block. */
.blog-index__head::after {
  content: "";
  display: block;
  width: 96px;
  height: 1px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, var(--color-honey), transparent);
}

/* -------------------------------------------------------------------------- */
/* Breadcrumb (archive views)                                                 */
/* -------------------------------------------------------------------------- */

/* The base .breadcrumb in theme.css is left-aligned, which is right above an
   entry. An archive head is centred, so the trail is centred with it — and it
   sits above the head rather than inside it, so the gold rule under the head
   still closes the block. */
.blog-index__breadcrumb {
  justify-content: center;
  margin-bottom: 28px;
}

/* -------------------------------------------------------------------------- */
/* Category row                                                               */
/* -------------------------------------------------------------------------- */

/* The journal's six primary categories, under the head on the index and on
   every archive. Pills rather than a tab bar: a tab bar implies the set is
   exhaustive and that one is always selected, and on the index none is. */
.blog-cats {
  margin: -20px 0 48px;
}

.blog-cats__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-cats__item {
  margin: 0;
}

.blog-cats__link {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-card);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-muted);
  transition: border-color var(--transition), background var(--transition),
    color var(--transition);
}

/* Forest fill for the current category — the one place in this row where the
   palette's darkest tone is worth spending, because it is the only thing
   telling the reader which of seven links they are standing on. */
.blog-cats__link.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg-card);
}

@media (hover: hover) and (pointer: fine) {
  .blog-cats__link:hover {
    border-color: var(--color-honey);
    color: var(--color-primary);
  }

  .blog-cats__link.is-active:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: var(--color-bg-card);
  }
}

/* -------------------------------------------------------------------------- */
/* Grid                                                                       */
/* -------------------------------------------------------------------------- */

.blog-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px var(--grid-gap);
  align-items: start;
}

/* The newest entry, page one only: full width, and the card inside it switches
   to its side-by-side layout. */
.blog-index__cell--lead {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}

/* -------------------------------------------------------------------------- */
/* Card                                                                       */
/* -------------------------------------------------------------------------- */

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.blog-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-image);
  background: var(--color-bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  /* Starts a hair over its frame so the hover scale has somewhere to go without
     ever revealing an edge. */
  transform: scale(1.015);
  transition: transform var(--dur-menu) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .blog-card:hover .blog-card__media {
    border-color: var(--color-honey);
    box-shadow: 0 10px 24px rgba(24, 58, 42, 0.1);
  }

  .blog-card:hover .blog-card__img {
    transform: scale(1.055);
  }
}

/* Placeholder for an entry with no featured image. */
.blog-card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 25% 15%, rgba(255, 255, 255, 0.85), transparent 55%),
    linear-gradient(145deg, var(--color-bg-muted), #e6d3a8);
}

.blog-card__initial {
  font-family: var(--font-display);
  font-size: clamp(64px, 8vw, 104px);
  font-weight: var(--fw-display);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.16;
  /* Optical centring: the cap sits slightly high in its own box. */
  transform: translateY(-0.04em);
  user-select: none;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.blog-card__category {
  margin-bottom: 8px;
}

/* The one brand line on the card — everything under it is Manrope and built to
   be scanned, exactly as on a product card. */
.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-display-medium);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-primary);
  text-wrap: balance;
}

.blog-card__title a {
  /* Underline grows from nothing on hover: inside a card the title is already
     obviously a link, so the rule is confirmation rather than signposting. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--dur-hover) var(--ease-out), color var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .blog-card__title a:hover {
    color: var(--color-accent-deep);
    background-size: 100% 1px;
  }
}

.blog-card__excerpt {
  margin-top: 10px;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* Pushed to the bottom so the date lines up across a row of cards whose titles
   and excerpts run to different lengths. */
.blog-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

.blog-card__dot {
  color: var(--color-honey);
}

.blog-card__more {
  margin-top: 20px;
}

.blog-card__more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--color-primary);
}

.blog-card__more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .blog-card__more a:hover {
    color: var(--color-accent-deep);
  }

  .blog-card__more a:hover svg {
    transform: translateX(4px);
  }
}

/* -------------------------------------------------------------------------- */
/* Featured card                                                              */
/* -------------------------------------------------------------------------- */

/* Image and copy side by side, copy centred against the frame. The image keeps
   the wider crop a lead photograph earns. */
.blog-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--color-border);
}

.blog-card--featured .blog-card__media {
  aspect-ratio: 3 / 2;
  margin-bottom: 0;
}

.blog-card--featured .blog-card__body {
  justify-content: center;
}

.blog-card--featured .blog-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
}

.blog-card--featured .blog-card__excerpt {
  margin-top: 14px;
  font-size: var(--fs-lg);
}

/* On the featured card the date belongs under the excerpt, not pinned to the
   bottom of a stretched column. */
.blog-card--featured .blog-card__foot {
  margin-top: 18px;
  padding-top: 0;
}

/* The only entry on the page: the rule under the featured card divides it from
   the grid below, and there is no grid below. */
.blog-index__cell--lead:only-child {
  margin-bottom: 0;
}

.blog-index__cell--lead:only-child .blog-card--featured {
  padding-bottom: 0;
  border-bottom: 0;
}

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

.blog-pagination {
  margin-top: 64px;
}

.blog-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-pagination li {
  display: flex;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-bg-card);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  color: var(--color-text-muted);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.blog-pagination .current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* The gap marker is not a control — no box around it. */
.blog-pagination .dots {
  min-width: 0;
  padding: 0 4px;
  border-color: transparent;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .blog-pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

/* -------------------------------------------------------------------------- */
/* Empty state                                                                */
/* -------------------------------------------------------------------------- */

.blog-empty {
  max-width: 520px;
  margin: 0 auto;
  padding: 56px 32px;
  text-align: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.blog-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

.blog-empty__text {
  margin: 14px 0 28px;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .blog-index__grid {
    gap: 40px var(--grid-gap);
  }

  .blog-card--featured {
    gap: 32px;
  }
}

/* Two-up, and the featured card stacks: below this width its copy column is too
   narrow to hold a headline at h3 without breaking every second word. */
@media (max-width: 900px) {
  .blog-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-card--featured {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .blog-card--featured .blog-card__media {
    aspect-ratio: 16 / 9;
    margin-bottom: 20px;
  }
}

@media (max-width: 700px) {
  .blog-index {
    padding: 36px 0 64px;
  }

  .blog-index__head {
    margin-bottom: 40px;
  }

  .blog-index__head::after {
    margin-top: 22px;
  }

  .blog-index__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .blog-index__cell--lead {
    margin-bottom: 4px;
  }

  .blog-card--featured {
    padding-bottom: 32px;
  }

  .blog-card--featured .blog-card__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-display-medium);
  }

  .blog-card--featured .blog-card__excerpt {
    font-size: var(--fs-md);
  }

  .blog-pagination {
    margin-top: 44px;
  }

  .blog-index__breadcrumb {
    margin-bottom: 22px;
  }

  /* Seven pills wrap to three centred rows on a phone, which pushes the first
     card most of a screen down. One scrolling line instead, bled to the
     viewport edges so the row reads as continuing past them rather than as a
     box that has been cut off. */
  .blog-cats {
    margin: -16px 0 36px;
  }

  .blog-cats__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    /* Snap positions align to the scrollport edge, not the padding edge, so
       without this the browser scrolls the row by exactly the gutter on load
       and the first pill ends up flush against the screen. */
    scroll-padding-inline: var(--page-gutter);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .blog-cats__list::-webkit-scrollbar {
    display: none;
  }

  .blog-cats__item {
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__img,
  .blog-card__more svg {
    transition: none;
  }

  .blog-card__img,
  .blog-card:hover .blog-card__img {
    transform: none;
  }
}

/* ==========================================================================
   Journal — a single entry (single.php)
   ========================================================================== */

.blog-entry {
  padding: 28px 0 0;
}

.blog-entry__breadcrumb {
  margin-bottom: 36px;
}

.blog-entry__breadcrumb .breadcrumb__current {
  color: var(--color-text-light);
}

/* -------------------------------------------------------------------------- */
/* Entry head                                                                 */
/* -------------------------------------------------------------------------- */

.blog-entry__head {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.blog-entry__category {
  margin-bottom: 14px;
}

.blog-entry__category:hover {
  color: var(--color-primary);
}

/* A step below the index's own h1. The index title is one word; an entry title
   is a sentence, and at --fs-h1 a long one fills the screen before the reader
   has reached the photograph. */
.blog-entry__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--color-primary);
  text-wrap: balance;
}

.blog-entry__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

.blog-entry__meta a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-entry__meta a:hover {
  color: var(--color-primary);
}

.blog-entry__dot {
  color: var(--color-honey);
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */

.blog-entry__hero {
  margin: 0 0 48px;
}

/* Natural proportions up to a ceiling: a landscape photograph keeps its shape,
   and a portrait one is capped rather than allowed to push the opening
   paragraph off the screen entirely. */
.blog-entry__hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-image);
}

.blog-entry__hero-caption {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Body                                                                       */
/* -------------------------------------------------------------------------- */

/* The measure. Everything else on the page may run the full container; running
   text stops here, at roughly 70 characters a line. */
.blog-entry__body {
  max-width: 700px;
  margin: 0 auto;
}

/* Images the editor placed inside the entry answer to the same frame as the
   hero, so the article reads as one piece. */
.blog-entry__body :is(img, iframe, video) {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

.blog-entry__body figure {
  margin-inline: 0;
}

.blog-entry__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.blog-entry__pages a {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.blog-entry__pages a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------- */
/* Tags and sharing                                                           */
/* -------------------------------------------------------------------------- */

.blog-entry__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 700px;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.blog-entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-card);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  color: var(--color-text-muted);
  transition: border-color var(--transition), color var(--transition);
}

.blog-tag:hover {
  border-color: var(--color-honey);
  color: var(--color-primary);
}

.blog-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.blog-share__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* The copy button is a <button> and the others are links; they are given the
   same box here so the row reads as one set of three. */
.blog-share__link {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-bg-card);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.blog-share__link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Confirmation, for the couple of seconds the label is swapped. */
.blog-share__copy.is-copied {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

/* -------------------------------------------------------------------------- */
/* Previous / next                                                            */
/* -------------------------------------------------------------------------- */

.blog-entry__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  max-width: 700px;
  margin: 40px auto 0;
}

.blog-entry__nav-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.blog-entry__nav-link:hover {
  border-color: var(--color-honey);
  box-shadow: var(--shadow-card);
}

/* The "next" card points right, so its whole contents sit right. */
.blog-entry__nav-link--next {
  text-align: right;
}

.blog-entry__nav-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-light);
}

.blog-entry__nav-link--next .blog-entry__nav-label {
  justify-content: flex-end;
}

.blog-entry__nav-label svg {
  width: 14px;
  height: 14px;
}

.blog-entry__nav-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-display-medium);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------- */
/* More from the Journal                                                      */
/* -------------------------------------------------------------------------- */

/* A tinted band, full bleed, so the page clearly ends and the invitation to
   keep reading begins. */
.blog-related {
  margin-top: 80px;
  padding: 64px 0;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
}

.blog-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}

.blog-related__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

.blog-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

/* On the tinted band the card frames would disappear into their own background. */
.blog-related .blog-card__media {
  background: var(--color-bg);
}

/* -------------------------------------------------------------------------- */
/* Comments                                                                   */
/* -------------------------------------------------------------------------- */

.blog-comments {
  max-width: 700px;
  margin: 0 auto;
  padding: 72px 0 88px;
}

.blog-comments__title,
.blog-comments .comment-reply-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

.blog-comments__title {
  margin-bottom: 32px;
}

.blog-comments__list,
.blog-comments .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-comments__list > li + li {
  margin-top: 8px;
}

/* Replies step in once and stop. Deeper threads keep the same indent rather
   than marching off the right edge on a phone. */
.blog-comments .children {
  margin-left: 28px;
  padding-left: 20px;
  border-left: 1px solid var(--color-border);
}

.blog-comments .comment-body {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
}

.blog-comments .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.blog-comments .comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
}

.blog-comments .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.blog-comments .fn {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  font-style: normal;
  color: var(--color-primary);
}

/* "says:" is scaffolding for screen readers that the visual row does not need,
   but it stays in the accessibility tree. */
.blog-comments .says {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.blog-comments .comment-metadata {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

.blog-comments .comment-metadata a {
  color: var(--color-text-light);
}

.blog-comments .comment-metadata a:hover {
  color: var(--color-primary);
}

.blog-comments .comment-content {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.blog-comments .comment-content > * + * {
  margin-top: 0.9em;
}

.blog-comments .comment-awaiting-moderation {
  margin-top: 10px;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--color-accent-deep);
}

.blog-comments .reply {
  margin-top: 12px;
}

.blog-comments .comment-reply-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--color-primary);
}

.blog-comments .comment-reply-link:hover {
  color: var(--color-accent-deep);
}

.blog-comments__closed {
  margin-top: 24px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Comment form                                                               */
/* -------------------------------------------------------------------------- */

.blog-comments .comment-respond {
  margin-top: 56px;
}

.blog-comments .comment-reply-title small {
  margin-left: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
}

.blog-comments .comment-reply-title small a {
  color: var(--color-accent-deep);
}

.blog-comment-form {
  margin-top: 24px;
}

.blog-comment-form p {
  margin: 0 0 18px;
}

.blog-comment-form label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin-bottom: 6px;
}

.blog-comment-form textarea {
  resize: vertical;
  min-height: 150px;
  line-height: var(--lh-body);
}

/* Name and email share a line: two short fields stacked would make the form
   look longer than the thing it is asking for. */
.blog-comment-form .comment-form-author,
.blog-comment-form .comment-form-email {
  display: inline-block;
  width: calc(50% - 8px);
  vertical-align: top;
}

.blog-comment-form .comment-form-author {
  margin-right: 12px;
}

.blog-comment-form__note {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--color-text-light);
}

.blog-comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.blog-comment-form .comment-form-cookies-consent input {
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}

.blog-comment-form .comment-form-cookies-consent label {
  margin-bottom: 0;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.blog-comment-form .form-submit {
  margin-bottom: 0;
}

.blog-comment-form .comment-notes,
.blog-comment-form .logged-in-as {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.blog-comment-form .logged-in-as a {
  color: var(--color-accent-deep);
}

/* -------------------------------------------------------------------------- */
/* Responsive — single entry                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .blog-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Three related entries in a two-column grid would leave a hole; the third
     takes the full width rather than sitting beside one. */
  .blog-related__grid > :last-child:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .blog-entry__breadcrumb {
    margin-bottom: 24px;
  }

  .blog-entry__head {
    margin-bottom: 32px;
  }

  .blog-entry__hero {
    margin-bottom: 36px;
  }

  .blog-entry__hero-img {
    max-height: 420px;
  }

  .blog-entry__foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-share {
    margin-left: 0;
  }

  /* Prev and next stack, and "next" stops being right-aligned — against a left
     edge there is nothing for it to align to. */
  .blog-entry__nav {
    grid-template-columns: 1fr;
  }

  .blog-entry__nav-link--next,
  .blog-entry__nav-link--next .blog-entry__nav-label {
    text-align: left;
    justify-content: flex-start;
  }

  .blog-related {
    margin-top: 56px;
    padding: 48px 0;
  }

  .blog-related__grid {
    grid-template-columns: 1fr;
  }

  .blog-comments {
    padding: 48px 0 64px;
  }

  .blog-comments .children {
    margin-left: 12px;
    padding-left: 14px;
  }

  /* Back to full width — half of a phone screen is not a usable text field. */
  .blog-comment-form .comment-form-author,
  .blog-comment-form .comment-form-email {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}

/* The reply form after core's script has moved it under the comment being
   answered. Indented to the same step as a reply and set on the card ground, so
   it reads as part of that exchange rather than as a second form on the page. */
.blog-comments li .comment-respond {
  margin: 20px 0 28px 28px;
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.blog-comments li .comment-reply-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-display-medium);
}

@media (max-width: 700px) {
  .blog-comments li .comment-respond {
    margin-left: 12px;
    padding: 18px;
  }
}