/* Blog: listing, article and the blocks that close every post.
   Built on the tokens declared in style.css (--font-intel, --color-heading, --radius-*),
   so the section inherits the site's type and colour without redefining either. */

/* Everything below prints text somebody typed, and text somebody typed contains runs that
   cannot be broken: a URL, a long compound, a paragraph an editor joined with non-breaking
   spaces. Without this, one of those pushes the line past the page instead of wrapping - which
   is exactly what happened. It belongs here rather than in the one place it showed up, because
   the next unbreakable run will arrive somewhere else. */
.blog-article-title,
.blog-article-lead,
.blog-post-body,
.blog-card-title,
.blog-card-excerpt,
.blog-author-bio,
.blog-author-bio-full,
.blog-post-nav-title {
  overflow-wrap: break-word;
}

.blog-section {
  padding: 64px 0;
}

/* --- Category filter ---------------------------------------------------------------- */

.blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.blog-category-pill {
  font-family: var(--font-intel);
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text);
  background-color: var(--accent-brand-primary-5);
  border: 1px solid var(--Colors-Brand-20);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  text-decoration: none;
}

.blog-category-pill:hover {
  color: var(--color-dark-green);
  border-color: var(--color-dark-green);
}

.blog-category-pill--active {
  background-color: var(--color-dark-green);
  border-color: var(--color-dark-green);
  color: var(--color-white);
}

/* --- Listing grid ------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.blog-card {
  display: flex;
  background-color: var(--color-white);
  border: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.blog-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.blog-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Posts without a hero still need to line up with the ones that have one. */
.blog-card-image--placeholder {
  background: linear-gradient(135deg, var(--Colors-Brand-20), var(--accent-brand-primary-5));
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.blog-card-category {
  font-family: var(--font-intel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--accent-brand-primary-50);
  margin: 0;
}

.blog-card-title {
  font-family: var(--font-intel);
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: var(--color-heading);
  margin: 0;
}

.blog-card:hover .blog-card-title {
  color: var(--color-dark-green);
}

.blog-card-excerpt {
  font-family: var(--font-intel);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0;
}

.blog-card-meta,
.blog-post-meta {
  font-family: var(--font-intel);
  font-size: 14px;
  line-height: 20px;
  color: var(--colors-text-text-tertiary-600);
  margin: 0;
}

.blog-card-dot {
  margin: 0 6px;
}

/* The meta line wraps as a whole on narrow cards; keep each piece of it intact so a long
   byline doesn't leave "7" on one line and "min read" on the next. */
.blog-card-meta > span,
.blog-card-meta time,
.blog-post-meta > span,
.blog-post-meta time {
  white-space: nowrap;
  display: inline-block;
}

.blog-empty {
  font-family: var(--font-intel);
  font-size: 18px;
  color: var(--color-text);
  text-align: center;
  padding: 48px 0;
}

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

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.blog-pagination-link {
  font-family: var(--font-intel);
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text);
  border: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  text-decoration: none;
}

.blog-pagination-link:hover {
  border-color: var(--color-dark-green);
  color: var(--color-dark-green);
}

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

/* --- Article ------------------------------------------------------------------------ */

/* One column, one width, from the breadcrumbs to the last link. The page had a full-width
   green band over a narrower white sheet over a narrower text column, and three competing
   widths read as an accident rather than a decision. */

.blog-article {
  padding: 32px 0 8px;
}

/* The article sits on a white sheet the same width as every other block on the site - the
   same container the "Looking for care?" card below uses - so the page has one edge instead
   of two. The reading column inside it stays around 75 characters, because that is set by
   the eye and not by the layout; the extra width goes to the hero image, which can use it. */
.blog-article-column {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 12px;
}

.blog-article-card {
  background-color: var(--color-white);
  border: 1px solid var(--Colors-Brand-20);
  border-radius: 24px;
  padding: 56px 64px;
}

/* Everything on the sheet lines up on the same two edges - the title, the text, the byline,
   the image and the blocks that close the article. The sheet's padding is the only margin. */
.blog-article-inner {
  max-width: none;
}

.blog-article-breadcrumbs {
  font-family: var(--font-intel);
  font-size: 14px;
  color: var(--colors-text-text-tertiary-600);
  margin-bottom: 28px;
}

.blog-article-breadcrumbs a {
  color: var(--colors-text-text-tertiary-600);
  text-decoration: none;
}

.blog-article-breadcrumbs a:hover {
  color: var(--color-dark-green);
  text-decoration: underline;
}

.blog-article-breadcrumbs span {
  margin: 0 8px;
}

.blog-article-head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--Colors-Brand-20);
}

.blog-article-eyebrow {
  display: inline-block;
  font-family: var(--font-intel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--accent-brand-primary-50);
  text-decoration: none;
  margin-bottom: 14px;
}

.blog-article-eyebrow:hover {
  color: var(--color-dark-green);
}

.blog-article-title {
  font-family: var(--font-intel);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -1px;
  color: var(--color-heading);
  margin: 0;
}

/* The summary, standing in for the opening paragraph rather than repeating it. */
.blog-article-lead {
  font-family: var(--font-intel);
  font-size: 22px;
  line-height: 34px;
  color: var(--color-text);
  margin: 16px 0 0;
}

.blog-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.blog-byline-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-byline-name {
  font-family: var(--font-intel);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-heading);
  margin: 0;
}

.blog-byline-name a {
  color: var(--color-heading);
  text-decoration: none;
}

.blog-byline-name a:hover {
  text-decoration: underline;
}

.blog-byline-meta {
  font-family: var(--font-intel);
  font-size: 14px;
  color: var(--colors-text-text-tertiary-600);
  margin: 2px 0 0;
}

.blog-byline-meta span {
  margin: 0 4px;
}

.blog-article-hero {
  margin: 36px 0 0;
}

.blog-article-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

/* Body copy comes from the editor, so the rules below style tags rather than classes.
   The column is already about 65 characters wide at this size, so the measure is set by
   the layout rather than by a second constraint here. */
/* Type grows with the column. What makes a line hard to read is the number of characters in
   it, not its width in pixels, so a full-width measure needs the largest body size here and
   a line height to match, or the eye loses its place coming back to the left edge. */
.blog-post-body {
  font-family: var(--font-intel);
  font-size: 21px;
  line-height: 37px;
  color: var(--color-text);
  margin-top: 36px;
}

.blog-post-body > *:first-child {
  margin-top: 0;
}

.blog-post-body h2 {
  font-family: var(--font-intel);
  font-size: 30px;
  font-weight: 500;
  line-height: 40px;
  color: var(--color-heading);
  margin: 40px 0 16px;
}

.blog-post-body h3 {
  font-family: var(--font-intel);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-heading);
  margin: 32px 0 12px;
}

.blog-post-body p,
.blog-post-body ul,
.blog-post-body ol {
  margin: 0 0 20px;
}

/* Justified, with hyphenation on. The two go together: without hyphens the browser can only
   stretch the spaces to reach the right margin, which is what opens the ragged white channels
   people recognise as bad justification. Paragraphs only - a justified list item is a short
   line stretched across the column. */
.blog-post-body p {
  text-align: justify;
  hyphens: auto;
}

.blog-post-body ul,
.blog-post-body ol {
  padding-left: 24px;
}

.blog-post-body li {
  margin-bottom: 8px;
}

.blog-post-body a {
  color: var(--color-dark-green);
  text-decoration: underline;
}

.blog-post-body blockquote {
  border-left: 3px solid var(--Colors-Brand-20);
  padding-left: 20px;
  margin: 0 0 20px;
  color: var(--color-heading);
}

.blog-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.blog-post-body figure {
  margin: 0 0 24px;
}

.blog-post-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

.blog-post-body th,
.blog-post-body td {
  border: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200);
  padding: 10px 12px;
  text-align: left;
}

/* Topics under the article. Quieter than the category pills on the index: there they are the
   way around the blog, here they are a footnote to something already being read. */
.blog-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.blog-post-tag {
  font-family: var(--font-intel);
  font-size: 14px;
  line-height: 18px;
  color: var(--colors-text-text-tertiary-600);
  background-color: var(--accent-brand-primary-5);
  border: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  text-decoration: none;
}

.blog-post-tag:hover {
  color: var(--color-dark-green);
  border-color: var(--Colors-Brand-20);
}

.blog-post-reviewer {
  font-family: var(--font-intel);
  font-size: 15px;
  color: var(--color-heading);
  border-top: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200);
  margin: 48px 0 0;
  padding-top: 20px;
}

.blog-post-reviewer-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-brand-primary-50);
  margin-bottom: 4px;
}

.blog-post-reviewer a {
  color: var(--color-dark-green);
}

/* --- Author box, disclaimer, next/previous ------------------------------------------ */

/* Inside the article's sheet, so it is separated by a rule rather than by being a second box
   drawn on top of the first. */
.blog-author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border-top: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200);
  padding-top: 28px;
  margin-top: 40px;
}

.blog-author-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-author-label {
  font-family: var(--font-intel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-brand-primary-50);
  margin: 0 0 4px;
}

.blog-author-name {
  font-family: var(--font-intel);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-heading);
  margin: 0 0 8px;
}

.blog-author-name a {
  color: var(--color-heading);
  text-decoration: none;
}

.blog-author-name a:hover {
  text-decoration: underline;
}

.blog-author-bio {
  font-family: var(--font-intel);
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0 0 12px;
}

.blog-author-link {
  font-family: var(--font-intel);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark-green);
}

/* --- Author page -------------------------------------------------------------------- */

/* The green band is a masthead: the name, and nothing else. Everything about the person sits
   on the sheet below it, which is where this section puts prose everywhere else. So the band
   loses the deep padding the other hero bands carry - there is one line of text in it. */
.blog-author-band {
  padding: 72px 0;
}

/* The sheet carrying the photo, the bio and the links. Same card as an article's text sits on,
   because it is the same kind of content: someone's writing, read at length. */
.blog-author-intro-section {
  padding-bottom: 0;
}

.blog-author-intro {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 40px 48px;
}

.blog-author-intro-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-author-intro-text {
  min-width: 0;
  flex: 1;
}

/* The bio, printed in full. The reading column is held near 75 characters the way the article
   body is - the sheet is wider than prose wants to be. */
.blog-author-bio-full {
  font-family: var(--font-intel);
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text);
  max-width: 68ch;
}

.blog-author-bio-full p {
  margin: 0 0 16px;
}

.blog-author-bio-full p:last-child {
  margin-bottom: 0;
}

/* --- The fold ----------------------------------------------------------------------- */

/* Checkbox and label, not script: the page has no JavaScript of its own, and a bio that needs
   a script to become readable is a bio that is unreadable while the script is still coming.
   Hidden from sight but not from the keyboard - the label is the visible control, and the
   checkbox keeps the focus ring and the toggle behaviour that comes with the real element. */
.blog-author-bio-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.blog-author-bio-full--foldable {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-author-bio-toggle:checked + .blog-author-bio-full--foldable {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

.blog-author-bio-more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-intel);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* One label, two words, and CSS picks which applies - so nothing has to rewrite the button. */
.blog-author-bio-more-close,
.blog-author-bio-toggle:checked ~ .blog-author-bio-more .blog-author-bio-more-open {
  display: none;
}

.blog-author-bio-toggle:checked ~ .blog-author-bio-more .blog-author-bio-more-close {
  display: inline;
}

/* The focus ring belongs on the thing a keyboard user sees, not on the hidden checkbox. */
.blog-author-bio-toggle:focus-visible ~ .blog-author-bio-more {
  outline: 2px solid var(--color-dark-green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Links and the way back to booking ---------------------------------------------- */

/* A column: the links stack, and the way back to booking sits under them rather than beside
   them competing for the same line. */
.blog-author-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200);
}


/* The article count under the sheet. It opens the list, so it keeps the space above it and
   gives none away below - and the list's own top padding is trimmed to match, or the heading
   and the grid it introduces read as two separate blocks. */
.blog-author-count {
  padding-bottom: 0;
}

.blog-author-count .blog-related-title {
  margin-bottom: 0;
}

.blog-author-count + .blog-section {
  padding-top: 32px;
}

/* Everywhere a reader can reach this author: the practice's own page for them, a personal
   site, LinkedIn, a directory listing. Buttons in a row rather than a stack of underlines,
   because each one is a destination and that is what the site's filled pill already says -
   the same shape as the Contact Us button in the header, and the same tokens. */
.blog-author-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-author-links li {
  margin: 0;
  display: flex;
}

/* Deliberately the same declarations as .btn-navbar-filled rather than a second look for the
   same job. Not @extend'ed or aliased, because this stylesheet is loaded on blog pages only
   and reaching across for a navbar class would tie the two together for no gain. */
.blog-author-links .blog-author-link {
  padding: 10px 18px;
  border: 1px solid var(--color-dark-green);
  border-radius: var(--radius-full);
  color: var(--color-white);
  background-color: var(--color-dark-green);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: all 0.2s ease;
  display: inline-block;
}

.blog-author-links .blog-author-link:hover,
.blog-author-links .blog-author-link:focus {
  background-color: #0d2f33;
  border-color: #0d2f33;
  color: var(--color-white);
  text-decoration: none;
}

/* A long label wraps inside its own button rather than pushing the row sideways. The navbar
   version can afford nowrap because "Contact Us" is two short words; "PAWC Provider Page"
   next to a hand-typed label is not a length anybody controls. */
@media (max-width: 480px) {
  .blog-author-links .blog-author-link {
    white-space: normal;
    text-align: center;
  }
}

/* "Connect with Amy Leung" - a sentence naming the person, so it is set as a small heading
   rather than the uppercase category label it replaced. Letter-spaced uppercase is for one
   word; it makes a name harder to read. */
.blog-author-links-label {
  font-family: var(--font-intel);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-heading);
  margin: 0 0 14px;
}

/* "See all articles by ..." under the three cards on a provider profile. */
.blog-author-more {
  margin: 20px 0 0;
  text-align: center;
}

.blog-disclaimer {
  background-color: var(--accent-brand-primary-5);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-top: 28px;
}

.blog-disclaimer p {
  font-family: var(--font-intel);
  font-size: 14px;
  line-height: 22px;
  color: var(--colors-text-text-tertiary-600);
  margin: 0 0 10px;
}

.blog-disclaimer p:last-child {
  margin-bottom: 0;
}

.blog-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}

.blog-post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 48%;
  text-decoration: none;
}

.blog-post-nav-link--next {
  margin-left: auto;
  text-align: right;
}

.blog-post-nav-label {
  font-family: var(--font-intel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-brand-primary-50);
}

.blog-post-nav-title {
  font-family: var(--font-intel);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-heading);
}

.blog-related-title {
  font-family: var(--font-intel);
  font-size: 32px;
  font-weight: 500;
  color: var(--color-heading);
  margin: 0 0 32px;
}

/* --- Taken-down article --------------------------------------------------------------- */

.blog-gone {
  max-width: 620px;
  margin: 0 auto;
  padding: 48px 0;
  text-align: center;
}

.blog-gone .blog-article-eyebrow {
  color: var(--accent-brand-primary-50);
}

.blog-gone-title {
  font-family: var(--font-intel);
  font-size: 32px;
  font-weight: 500;
  line-height: 42px;
  color: var(--color-heading);
  margin: 0 0 16px;
}

.blog-gone-text {
  font-family: var(--font-intel);
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text);
  margin: 0 0 28px;
}

.blog-gone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.blog-gone-link {
  font-family: var(--font-intel);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark-green);
  margin-bottom: 20px;
}

/* --- Preview banner and CTA ---------------------------------------------------------- */

.blog-preview-banner {
  background-color: var(--Component-colors-Utility-Warning-utility-warning-50);
  border-bottom: 1px solid var(--Component-colors-Utility-Warning-utility-warning-200);
  color: var(--Component-colors-Utility-Warning-utility-warning-700);
  font-family: var(--font-intel);
  font-size: 14px;
  text-align: center;
  padding: 12px 16px;
}

.blog-cta {
  padding: 24px 0 72px;
}

.blog-cta-card {
  background-color: var(--bg-base-green);
  border-radius: 24px;
  padding: 48px;
  text-align: center;
}

.blog-cta-title {
  font-family: var(--font-intel);
  font-size: 32px;
  font-weight: 500;
  color: var(--color-white);
  margin: 0 0 12px;
}

.blog-cta-text {
  font-family: var(--font-intel);
  font-size: 17px;
  line-height: 26px;
  color: var(--Colors-Brand-20);
  max-width: 620px;
  margin: 0 auto 24px;
}

.blog-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.blog-cta-secondary {
  font-family: var(--font-intel);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: underline;
  margin-bottom: 20px;
}

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

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

  /* Tablet: the sheet takes the width it is given, with less padding around the text. */
  .blog-article-card {
    padding: 44px 40px;
  }
}

@media (max-width: 767px) {
  .blog-section {
    padding: 40px 0;
  }

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

  .blog-article {
    padding: 20px 0 8px;
  }

  .blog-article-column {
    padding: 0 12px;
  }

  .blog-article-card {
    padding: 28px 20px;
    border-radius: 18px;
  }

  .blog-article-lead {
    font-size: 18px;
    line-height: 28px;
  }

  .blog-post-body {
    font-size: 17px;
    line-height: 29px;
  }

  /* Ragged right on a phone. The column is a third of the width here, so there are too few
     words in a line to absorb the space justification has to distribute, and it opens the
     gaps it avoids on a wide screen. */
  .blog-post-body p {
    text-align: left;
    hyphens: manual;
  }

  .blog-post-body h2 {
    font-size: 25px;
    line-height: 34px;
  }

  .blog-author-box {
    flex-direction: column;
  }

  /* The photo goes above the text and centres, because a 140px circle beside a 40-character
     column leaves neither enough room. */
  .blog-author-intro {
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    text-align: center;
  }

  .blog-author-intro-photo {
    width: 112px;
    height: 112px;
  }

  .blog-author-band {
    padding: 48px 0;
  }

  .blog-author-meta {
    align-items: center;
  }

  .blog-author-links {
    justify-content: center;
  }

  .blog-author-links-group {
    width: 100%;
  }

  /* Centring prose is fine for two lines and unreadable for twenty, so the bio keeps its
     left edge even while the block around it is centred. */
  .blog-author-bio-full {
    text-align: left;
  }

  .blog-post-nav {
    flex-direction: column;
  }

  .blog-post-nav-link,
  .blog-post-nav-link--next {
    max-width: 100%;
    text-align: left;
    margin-left: 0;
  }

  .blog-cta-card {
    padding: 32px 24px;
  }
}