/* Single blog post: template layout and body typography.

   Enqueued only on is_singular("post"), the same one-stylesheet-per-template
   rule css/product.css and its siblings follow. Not part of the Tailwind
   bundle, and it cannot be: Tailwind builds CSS by scanning files, and a post
   body lives in wp_posts.post_content where no scanner can see it.

   Two halves, and the split matters.

   The g80-post__* rules style single.php, which this theme owns. Component
   classes, chosen freely, and safe to select on.

   Everything under .entry-content styles the BLOCK EDITOR'S OWN MARKUP, where
   there is nothing to choose. A post is written in wp-admin and the editor
   decides the markup: paragraphs come out as p, headings as h2/h3, and any
   class typed into pasted HTML is dropped on the way in. So those rules infer
   meaning from position: the strong-led paragraph after a heading is a caveat,
   the last two paragraphs are the citation and the disclaimer. That is
   inference, not markup, so each is written to degrade to plain prose rather
   than to something wrong when a post is shaped differently. Nothing here
   hides content or reorders it.

   One earlier decision is reversed here. This file used to match headings as
   h2.wp-block-heading, on the grounds that the editor really does store that
   class. It does, but bare h2 covers the same posts plus any older heading
   written before the block editor stored it, and an h2 that matches nothing
   falls back to the font-size: inherit reset in css/wordpress.css and renders
   as body text. The narrower selector bought nothing and could only lose.

   Specificity, and why the body selectors look over-qualified.

   Six rules target this page from the DATABASE, not from this repo, out of two
   different Customizer surfaces. Both print inline in <head>, after every
   enqueued stylesheet, so they win any specificity tie on source order.

   Customizer > Additional CSS (<style id="wp-custom-css">). This file already
   owns every declaration these make, so they are safe to delete:

     .single-post .entry-content            { max-width: 1200px }      0,2,0
     .single-post .entry-content p          { margin-bottom: 1.2em }   0,2,1
     .single-post .entry-content :is(h1..h6){ margin-bottom: 0.2em }   0,2,1

   Shoptimizer's typography options, via Kirki (<style id="kirki-inline-styles">).
   These are theme settings someone chose in the Customizer, NOT stray CSS, and
   two of them are sitewide. Do not delete those two:

     .single-post h1  { line-height: 1.74 }                            0,1,1
     h1               { font-family: Inter; font-size: 42px; .. }      0,0,1  sitewide
     .entry-content   { font-family: Inter; .. }                       0,1,0  sitewide

   The sitewide pair is why post copy renders in Inter rather than the system
   stack, which is correct and deliberate; this file does not set font-family
   and must not start. A plain `.entry-content p`
   here scores 0,1,1 and loses; the body ran the full 1200px container and
   headings sat 0.2em off their paragraphs, which is most of what the redesign
   set out to fix. Hence the `.g80-post .entry-content.g80-post__body` prefix
   at 0,3,0 and `.g80-post h1.g80-post__title` at 0,2,1. Simplify either and
   the database quietly wins again.

   The durable fix is deleting the three Additional CSS rules and resetting the
   .single-post h1 line-height in the typography panel. An earlier note claimed
   these had been lifted out of the database when they had only been copied,
   and the repo's copies were then removed on the strength of it, which is what
   let the originals surface. Until the database is cleaned the qualification
   here is load-bearing, not decoration. The .single-post rules that
   used to set post font sizes in css/wordpress.css were moved into this file
   when single.php landed, so that post typography has one owner rather than
   two files that have to agree. */

/* --- Layout --------------------------------------------------------------
   header.php opens .container.mx-auto.px-6 and footer.php closes it, so the
   article renders inside that. The container is Tailwind's responsive one and
   grows to 1536px on a wide screen, so the article caps itself rather than
   trusting it: an unbounded hero on a 27in display is the failure mode.

   The measure is the whole point of the redesign. Body copy sits at 680px,
   about 75 characters at 18px, while the hero and the end-of-post CTA use the
   full 1160px. It is a custom property because six blocks share it and the
   number is the one thing likely to be tuned again. */
.g80-post {
  --g80-post-measure: 680px;

  max-width: 1160px;
  margin-inline: auto;
}

.g80-post__crumbs,
.g80-post__header,
.g80-post__author-card,
.g80-post__comments,
.g80-post__nav {
  max-width: var(--g80-post-measure);
  margin-inline: auto;
}

/* The body carries two classes and needs all three of these to land the
   measure. `.single-post .entry-content { max-width: 1200px }` lives in the
   Customizer's Additional CSS, which prints inline in <head> after every
   enqueued sheet, so it wins any tie at 0,2,0 on source order. Qualifying to
   0,3,0 is what keeps body copy at the reading measure instead of letting it
   run the full container. Simplifying this selector reverts the redesign's
   central change silently. See the note at the top of this file. */
.g80-post .entry-content.g80-post__body {
  max-width: var(--g80-post-measure);
  margin-inline: auto;
}

/* --- Breadcrumbs ---------------------------------------------------------
   The real page hierarchy: /newsroom, then /newsroom/blog where posts are
   listed. The category is a taxonomy rather than a step in the path, so it
   stays out of the trail and leads the post header instead. */
.g80-post__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 26px;
  font-size: 13px;
  line-height: 1.4;
}

.g80-post__crumbs a {
  color: #767676;
}

.g80-post__crumbs a:hover,
.g80-post__crumbs a:focus-visible {
  color: #1a1a1a;
}

.g80-post__crumb-sep {
  color: #d2d2d2;
}

.g80-post__crumb-current {
  color: #1a1a1a;
  font-weight: 500;
}

/* --- Post header ---------------------------------------------------------
   Category, title, dek and byline as one block on the body's rail, replacing
   the lone uppercase date line and the centred "Posted in:" that used to sit
   orphaned under the content. */
.g80-post__header {
  padding-top: 36px;
}

.g80-post__kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9f0712;
}

.g80-post__kicker:hover,
.g80-post__kicker:focus-visible {
  color: #870610;
}

.g80-post h1.g80-post__title {
  margin: 16px 0 0;
  font-size: 52px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1a1a1a;
  text-wrap: balance;
}

/* The dek is the post's manual excerpt, printed only when there is one. */
.g80-post__dek {
  margin: 20px 0 0;
  font-size: 21px;
  line-height: 1.55;
  color: #555555;
  text-wrap: pretty;
}

.g80-post__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid #e5e5e5;
  font-size: 13px;
}

.g80-post__avatar,
.g80-post__author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1a1a1a;
}

.g80-post__avatar {
  width: 28px;
  height: 28px;
}

.g80-post__author {
  font-weight: 600;
  color: #1a1a1a;
}

.g80-post__byline-sep {
  color: #c8c8c8;
}

.g80-post__date {
  color: #767676;
}

/* --- Hero ----------------------------------------------------------------
   Breaks out of the measure to the full article width. A post with no
   featured image renders no figure at all, and the header simply meets the
   body. */
.g80-post__hero {
  margin: 36px 0 0;
}

.g80-post__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* --- Body ---------------------------------------------------------------- */
.g80-post__body {
  padding-top: 52px;
}

.g80-post .entry-content.g80-post__body p {
  font-size: 18px;
  line-height: 1.72;
  color: #333333;
  margin-bottom: 26px;
}

/* Sections. The red rule is a pseudo-element because there is no element in
   editor output to hang it on, and it is what makes a section start
   unmistakable at a glance. */
.g80-post .entry-content.g80-post__body > h2 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #1a1a1a;
  margin-top: 56px;
  margin-bottom: 18px;
}

.g80-post .entry-content.g80-post__body > h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: #9f0712;
  margin-bottom: 18px;
}

/* Subsections. Plain prose, differentiated by size and weight rather than by
   the grey panel this file used to draw around every h3 and the paragraph
   after it. Panelling every subsection spent the callout on ordinary content
   and left nothing louder for the one passage that needs it, below. */
.g80-post .entry-content.g80-post__body > h3 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: #1a1a1a;
  margin-top: 34px;
  margin-bottom: 10px;
}

.g80-post .entry-content.g80-post__body > h4,
.g80-post .entry-content.g80-post__body > h5,
.g80-post .entry-content.g80-post__body > h6 {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 28px;
  margin-bottom: 8px;
}

/* --- Inline elements -----------------------------------------------------
   The :not() is load-bearing. A block button is an <a>, so an unqualified
   .g80-post .entry-content.g80-post__body a scores 0,1,1 and outranks core's own .wp-block-button__link
   colour at 0,1,0: the filled variant came out brand red on brand red, an
   invisible label on a button that still worked. Buttons take their colours
   from the block below. */
.g80-post .entry-content.g80-post__body a:not(.wp-block-button__link) {
  color: #9f0712;
  border-bottom: 1px solid rgba(159, 7, 18, 0.3);
  padding-bottom: 1px;
}

.g80-post .entry-content.g80-post__body a:not(.wp-block-button__link):hover,
.g80-post .entry-content.g80-post__body a:not(.wp-block-button__link):focus-visible {
  color: #870610;
  border-bottom-color: #9f0712;
}

.g80-post .entry-content.g80-post__body strong {
  font-weight: 650;
  color: #1a1a1a;
}

.g80-post .entry-content.g80-post__body em {
  font-style: italic;
}

.g80-post .entry-content.g80-post__body ul,
.g80-post .entry-content.g80-post__body ol {
  margin: 0 0 26px;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.72;
  color: #333333;
}

.g80-post .entry-content.g80-post__body li {
  margin-bottom: 10px;
}

.g80-post .entry-content.g80-post__body li::marker {
  color: #9f0712;
}

.g80-post .entry-content.g80-post__body blockquote {
  margin: 32px 0;
  border-left: 3px solid #9f0712;
  padding: 2px 0 2px 24px;
}

.g80-post .entry-content.g80-post__body blockquote p {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.g80-post .entry-content.g80-post__body blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-style: normal;
  color: #767676;
}

.g80-post .entry-content.g80-post__body figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #767676;
}

/* --- The scope caveat ----------------------------------------------------
   Deliberately heavier than the prose around it, for the same reason
   .woocommerce-error outweighs the rest of the notice family in
   css/wordpress.css: this is the block a reader most needs not to skim.
   Overstating the reach of a party-specific injunction is the one factual
   error a litigation post can make, and the passage that corrects it must not
   be the quietest thing on the page. A full hairline and a heavy left rule
   carry that, rather than a louder colour, which would read as an error state.

   OPT-IN, and it has to be. Everything else under .entry-content infers its
   target from document structure, but there is no structural signal for "this
   paragraph is the qualification". The obvious one is wrong: a selector like
   p:has(> strong:first-child) reads as "opens with bold text" and is not,
   because :first-child counts only element children. It matches any paragraph
   whose first *element* is a strong regardless of the prose in front of it,
   which on the court ruling post silently caught "The order declares ...
   <strong>M1911 80% Frames</strong>" as well. A rule that panels the wrong
   paragraph is worse than no rule, so this one waits to be asked.

   To apply it: select the paragraph in wp-admin, open the block settings
   sidebar, and put g80-post-caveat in Advanced > Additional CSS class(es).
   That is stored in the block's own markup and survives later edits, which a
   class typed into pasted HTML does not. The paragraph immediately after it
   is picked up automatically, so a two-paragraph caveat needs the class on
   the first one only. Without the class the passage renders as ordinary
   prose. */
.g80-post .entry-content.g80-post__body > p.g80-post-caveat {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-left: 3px solid #1a1a1a;
  border-bottom: 0;
  padding: 22px 26px 6px;
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.65;
  color: #333333;
}

/* The second half of the same passage. Same field, closing the box. */
.g80-post .entry-content.g80-post__body > p.g80-post-caveat + p {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-left: 3px solid #1a1a1a;
  border-top: 0;
  padding: 0 26px 22px;
  margin-top: 0;
  margin-bottom: 26px;
  font-size: 17px;
  line-height: 1.65;
  color: #444444;
}

/* --- In-post call to action ----------------------------------------------
   The editor owns which button is filled and which is outlined; that is an
   editorial choice and this stylesheet does not override it. What it does is
   give both the theme's geometry instead of the block library's defaults, so
   they match the buttons everywhere else on the site, and stop them stretching
   to the full measure as a mismatched pair.

   46px because these are the only two targets in a wall of prose and one of
   them leaves the site for a long PDF. */
.g80-post .entry-content.g80-post__body .wp-block-button {
  width: auto;
  flex: 0 0 auto;
}

.g80-post .entry-content.g80-post__body .wp-block-buttons {
  /* Core's block library supplies the flex; restating it means the pair still
     sits on one row if that stylesheet is ever deferred or dequeued, rather
     than silently falling back to two stacked blocks. */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 40px 0 0;
}

.g80-post .entry-content.g80-post__body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 0;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

/* The outline variant ships transparent with a currentColor border. Give it
   the theme's near-black rather than inheriting whatever the block palette
   resolved to. */
.g80-post .entry-content.g80-post__body .wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  background: transparent;
}

.g80-post .entry-content.g80-post__body .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #1a1a1a;
  color: #ffffff;
}

.g80-post .entry-content.g80-post__body .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: #9f0712;
  color: #ffffff;
}

/* A block button's label is usually wrapped in <strong> by the editor, and the
   inline `strong` rule above matches it: the anchor computed white while the
   text inside it painted #1a1a1a, so the label on the filled variant was
   near-black on brand red. Everything inside a button takes the button's own
   colour and weight.

   This is the second time an inline-element rule reached into a block button.
   Any new descendant selector added to the inline section above needs the same
   treatment, or it will do this again. */
.g80-post .entry-content.g80-post__body .wp-block-button__link * {
  color: inherit;
  font-weight: inherit;
}

.g80-post .entry-content.g80-post__body
  .wp-block-button:not(.is-style-outline)
  .wp-block-button__link:hover {
  background: #870610;
}

/* --- Inline PDF ----------------------------------------------------------
   The core File block prints three things: the <object> preview, a link
   carrying the file name, then an optional Download button. The file name is
   the raw upload name, so on the opinion it reads
   "2026-08-17 Opinion [dckt 330_0]_260818_100440", a docket string sitting
   under the document as a red underlined link. There is no editor toggle for
   it, unlike the Download button, so it is hidden here.

   Scoped with :has() to previews only. A File block with no embed is a plain
   download link, and there the file name IS the block; hiding it there would
   leave a bare button or nothing at all. A browser without :has() shows the
   name, which is the old behaviour rather than a broken one.

   Worth knowing: core hides the <object> itself on phones and tablets, where
   no browser renders a PDF inline, via the block's interactivity module. With
   the file name hidden too, a File block whose Download button is also off
   renders as nothing on mobile. The post's own "Read the Opinion" button is
   what covers that case; a preview added somewhere without one needs the
   Download button left on. */
.g80-post
  .entry-content.g80-post__body
  .wp-block-file:has(.wp-block-file__embed)
  a:not(.wp-block-file__button) {
  display: none;
}

/* The paragraph rhythm, so the embed sits in the prose rather than tight
   against it. Core's own margin is a :where() rule at zero specificity. */
.g80-post .entry-content.g80-post__body .wp-block-file {
  margin-bottom: 26px;
}

/* --- Citation and disclaimer ---------------------------------------------
   The last two paragraphs: the case citation, then the legal-advice
   disclaimer. Both step down from body copy so the piece ends quietly, and
   the rule above the citation closes the article off from the prose.

   Positional, so a post ending some other way simply keeps body copy. */
.g80-post .entry-content.g80-post__body > p:nth-last-of-type(2) {
  font-size: 14px;
  line-height: 1.65;
  color: #666666;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid #e5e5e5;
}

.g80-post .entry-content.g80-post__body > p:last-of-type {
  font-size: 13px;
  line-height: 1.6;
  color: #8a8a8a;
  margin-bottom: 0;
}

/* The editor emits an empty paragraph wherever someone pressed return past
   the end of a block. It is invisible but it still takes its margin, which
   reads as an inconsistent gap rather than as a blank line. */
.g80-post .entry-content.g80-post__body > p:empty {
  display: none;
}

/* --- Author card ---------------------------------------------------------
   Name and bio are the post author's. The picture is not: it is the G80 mark
   on the brand near-black, so there is no gravatar to fetch and nothing to
   fall back from when a user has none. An author with no bio gets the card
   without the paragraph. */
.g80-post__author-card {
  margin-top: 52px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 6px;
  padding: 26px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.g80-post__author-avatar {
  width: 56px;
  height: 56px;
}

.g80-post__author-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999999;
}

.g80-post__author-name {
  margin-top: 5px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.g80-post__author-bio {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #555555;
}

/* --- Post navigation -----------------------------------------------------
   Up the hierarchy on the left, sideways through the category on the right.
   A post filed under nothing renders the left link alone. */
.g80-post__nav {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.g80-post__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

.g80-post__nav-link:hover,
.g80-post__nav-link:focus-visible {
  color: #9f0712;
}

.g80-post__nav-icon {
  color: #9f0712;
  flex-shrink: 0;
}

/* --- End of post call to action ------------------------------------------
   Template level, so it runs under every post rather than being retyped into
   each one. Breaks out to the full article width so it reads as a module and
   not as more article.

   The product image is a transparent cutout, which is why the panel can be
   any colour: a shot with a baked-in field would have to match #f5f5f5
   exactly or leave a seam where it ended. */
.g80-post__cta {
  margin-top: 64px;
  background: #f5f5f5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 34px 44px;
}

.g80-post__cta-image {
  width: 440px;
  max-width: 45%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* The copy is centred in whatever space the image leaves rather than pinned
   to the left of it, so the slack does not all collect on the right. */
.g80-post__cta-body {
  flex: 1;
  display: flex;
  justify-content: center;
}

.g80-post__cta-inner {
  width: 100%;
  max-width: 440px;
}

.g80-post__cta-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9f0712;
}

.g80-post__cta-title {
  margin-top: 12px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #1a1a1a;
}

.g80-post__cta-copy {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
}

.g80-post__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 4px;
  background: #9f0712;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.18s ease;
}

.g80-post__cta-button:hover,
.g80-post__cta-button:focus-visible {
  background: #870610;
  color: #ffffff;
}

/* Muted price inside the button, the same relationship the header CTA uses. */
.g80-post__cta-price {
  color: rgba(255, 255, 255, 0.66);
  font-weight: 500;
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1023px) {
  .g80-post h1.g80-post__title {
    font-size: 42px;
  }

  .g80-post__cta {
    gap: 32px;
    padding: 28px 32px;
  }

  .g80-post__cta-image {
    width: 320px;
  }
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* The trail would wrap to two lines, and its last step repeats the h1
     directly beneath it. Drop the current page and the separator before it. */
  .g80-post__crumbs {
    padding-top: 22px;
    gap: 7px;
    font-size: 12.5px;
  }

  .g80-post__crumbs > span:nth-last-child(-n + 2) {
    display: none;
  }

  .g80-post__header {
    padding-top: 20px;
  }

  .g80-post h1.g80-post__title {
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.022em;
    margin-top: 12px;
  }

  .g80-post__dek {
    margin-top: 16px;
    font-size: 18px;
  }

  .g80-post__byline {
    margin-top: 24px;
    padding-top: 16px;
  }

  /* Edge to edge, out through the container's px-6. Square, because a rounded
     corner against the viewport edge reads as a mistake. */
  .g80-post__hero {
    margin: 26px -1.5rem 0;
  }

  .g80-post__hero img {
    border-radius: 0;
  }

  .g80-post__body {
    padding-top: 34px;
  }

  .g80-post .entry-content.g80-post__body p,
  .g80-post .entry-content.g80-post__body ul,
  .g80-post .entry-content.g80-post__body ol {
    font-size: 17px;
    margin-bottom: 24px;
  }

  .g80-post .entry-content.g80-post__body > h2 {
    font-size: 24px;
    letter-spacing: -0.016em;
    margin-top: 44px;
    margin-bottom: 15px;
  }

  .g80-post .entry-content.g80-post__body > h2::before {
    width: 28px;
    margin-bottom: 15px;
  }

  .g80-post .entry-content.g80-post__body > h3 {
    font-size: 18px;
    margin-top: 28px;
  }

  .g80-post .entry-content.g80-post__body blockquote p {
    font-size: 19px;
  }

  .g80-post .entry-content.g80-post__body > p.g80-post-caveat {
    padding: 18px 20px 6px;
    font-size: 16px;
  }

  .g80-post .entry-content.g80-post__body > p.g80-post-caveat + p {
    padding: 0 20px 18px;
    font-size: 16px;
  }

  /* Two buttons will not sit side by side at this width. Stacked they still
     read as primary and secondary, because the fills differ. */
  .g80-post .entry-content.g80-post__body .wp-block-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .g80-post .entry-content.g80-post__body .wp-block-button,
  .g80-post .entry-content.g80-post__body .wp-block-button__link {
    width: 100%;
  }

  /* Avatar beside the name, bio on its own line under both, so the bio keeps
     a readable measure instead of running in a narrow column beside a disc. */
  .g80-post__author-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0 13px;
    padding: 22px;
  }

  .g80-post__author-avatar {
    width: 48px;
    height: 48px;
    grid-row: 1 / 3;
    align-self: center;
  }

  .g80-post__author-text {
    display: contents;
  }

  .g80-post__author-label,
  .g80-post__author-name {
    grid-column: 2;
  }

  .g80-post__author-bio {
    grid-column: 1 / -1;
    margin-top: 14px;
    font-size: 14.5px;
  }

  .g80-post__nav-link {
    font-size: 14px;
  }

  .g80-post__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 40px;
    padding: 24px 22px 26px;
  }

  .g80-post__cta-image {
    width: 100%;
  }

  .g80-post__cta-body {
    display: block;
  }

  .g80-post__cta-inner {
    max-width: none;
  }

  .g80-post__cta-title {
    font-size: 24px;
    letter-spacing: -0.016em;
  }

  .g80-post__cta-copy {
    font-size: 15px;
  }

  .g80-post__cta-button {
    justify-content: center;
    min-height: 48px;
  }
}
