/* ============================================================
   BackTheme — WordPress bridge
   Load order: 1 tokens > 2 base > 3 components > 4 mockups > 5 sections > [6 bridge]

   The only file in this theme that did not exist on the static site.

   Files 1-5 are byte-identical to the static site's stylesheets and are
   meant to stay that way, so that one design system serves both. That
   leaves a gap: Core blocks emit their own wrappers and class names, and
   a few of them sit between a BackTheme container and the element the
   original CSS targets.

   This file closes that gap and does nothing else. Every rule here either
   neutralises a Core wrapper, or forwards a Core class to a BackTheme one.
   NO RULE HERE INTRODUCES A NEW VISUAL DECISION. If you find yourself
   wanting to change a colour, a size or a spacing value, it belongs in
   files 1-5 (or, far more likely, in theme.json).

   Contents
     1. Core resets that the BackTheme reset expects
     2. Navigation block  -> .backtheme-nav / .backtheme-drawer__nav
     3. Query Loop        -> BackTheme card grids
     4. Site logo & title -> .backtheme-logo
     5. Post content prose
     6. Comments, search, pagination
   ============================================================ */


/* ============================================================
   1. Core resets
   ============================================================ */

/* WordPress gives the outermost wrapper no styling of its own, but every
   BackTheme section is a full-bleed band, so it must not be constrained. */
.wp-site-blocks,
.wp-site-blocks > * { max-width: none; }

/* backtheme-base.css zeroes every margin and expects sections to own their
   own padding. Core's default block gap would re-introduce vertical rhythm
   between sections and pull them apart. theme.json sets blockGap to 0, and
   this backs it up for blocks that hard-code a margin. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Core marks alignfull/alignwide with negative margins tuned to its own root
   padding. BackTheme uses .backtheme-container instead, and the two fight. */
.wp-site-blocks .alignfull { margin-inline: 0; width: auto; }

/* The Group block's constrained layout injects its own max-width. Where a
   group also carries a BackTheme container class, the container wins. */
.backtheme-container.is-layout-constrained > *,
.backtheme-container--wide.is-layout-constrained > * { max-width: none; }


/* ============================================================
   2. Navigation block

   Static markup was  nav > a.backtheme-nav__link
   Core markup is     nav > ul > li > a

   inc/block-bridge.php puts .backtheme-nav__link on the anchors, so the
   anchors already look right. Only the two wrappers Core adds in between
   need flattening.
   ============================================================ */

.backtheme-nav .wp-block-navigation__container,
.backtheme-drawer__nav .wp-block-navigation__container {
  display: flex;
  gap: inherit;
  align-items: inherit;
  flex-direction: inherit;
  padding: 0;
  margin: 0;
  list-style: none;
}

.backtheme-nav .wp-block-navigation-item,
.backtheme-drawer__nav .wp-block-navigation-item { display: flex; }

.backtheme-drawer__nav .wp-block-navigation-item { flex-direction: column; }
.backtheme-drawer__nav .wp-block-navigation__container { width: 100%; }
.backtheme-drawer__nav .backtheme-drawer__link { width: 100%; }

/* Core wraps the label in a span; it must not become a flex item of its own
   or the drawer's baseline alignment shifts. */
.backtheme-nav__link .wp-block-navigation-item__label,
.backtheme-drawer__link .wp-block-navigation-item__label { display: inline; }

/*
 * The drawer's stepped entrance.
 *
 * .backtheme-drawer__link reads --i to stagger each row in
 * (transition-delay: calc(80ms + var(--i) * 55ms)). The static site wrote
 * style="--i:0" ... style="--i:5" by hand. A Navigation block is editable,
 * so the count is not known ahead of time and nth-child supplies it instead.
 * Ten covers any realistic primary menu; an eleventh item inherits --i: 0
 * from the component rule and simply arrives with the first.
 */
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(1)  .backtheme-drawer__link { --i: 0; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(2)  .backtheme-drawer__link { --i: 1; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(3)  .backtheme-drawer__link { --i: 2; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(4)  .backtheme-drawer__link { --i: 3; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(5)  .backtheme-drawer__link { --i: 4; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(6)  .backtheme-drawer__link { --i: 5; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(7)  .backtheme-drawer__link { --i: 6; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(8)  .backtheme-drawer__link { --i: 7; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(9)  .backtheme-drawer__link { --i: 8; }
.backtheme-drawer__nav .wp-block-navigation-item:nth-child(10) .backtheme-drawer__link { --i: 9; }

/*
 * The 01-06 numerals down the right of the drawer.
 *
 * Generated rather than typed, for the same reason as --i above: the menu is
 * editable. decimal-leading-zero reproduces the static site's "01" exactly.
 * The counter is presentational, so it goes in ::after where screen readers
 * will not announce it — which is an improvement on the static markup, where
 * it was a real <span> that got read out after every link.
 */
.backtheme-drawer__nav .wp-block-navigation__container { counter-reset: backtheme-drawer-index; }
.backtheme-drawer__nav .wp-block-navigation-item { counter-increment: backtheme-drawer-index; }

.backtheme-drawer__nav .backtheme-drawer__link::after {
  content: counter(backtheme-drawer-index, decimal-leading-zero);
  font-size: var(--backtheme-step--1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--backtheme-fg-subtle);
  letter-spacing: var(--backtheme-tracking-wide);
}

/* Core's mobile overlay would fight the BackTheme drawer; both are hidden
   on desktop and the drawer is the one that exists here. */
.backtheme-nav .wp-block-navigation__responsive-container-open,
.backtheme-nav .wp-block-navigation__responsive-container-close { display: none; }


/* ============================================================
   3. Query Loop

   Static markup was  div.backtheme-work-grid > article.backtheme-work-card
   Core markup is     ul.wp-block-post-template > li.wp-block-post

   inc/block-bridge.php copies the card classes onto each <li>, so the card
   itself is already correct. The <ul> has to stop being a list and start
   being the grid.
   ============================================================ */

.wp-block-post-template {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* A Post Template carrying a BackTheme grid class inherits that grid whole:
   the grid-template-columns, gap and breakpoints all come from
   backtheme-sections.css, so the two never drift. */
.wp-block-post-template.backtheme-work-grid,
.wp-block-post-template.backtheme-services-grid,
.wp-block-post-template.backtheme-product-grid,
.wp-block-post-template.backtheme-testimonial-grid,
.wp-block-post-template.backtheme-post-grid,
.wp-block-post-template.backtheme-why-grid,
.wp-block-post-template.backtheme-expertise-grid,
.wp-block-post-template.backtheme-accordion { display: grid; }

/* Core sets `display: grid` on its own columns variant; BackTheme's grid
   classes already declare their columns, so Core's must not override them. */
.wp-block-post-template.is-flex-container,
.wp-block-post-template.is-layout-flex { display: grid; gap: inherit; }

/* Titles, excerpts and dates inside a card are plain text: the card owns the
   spacing, exactly as it did when they were hand-written elements. */
.wp-block-post :where(.wp-block-post-title, .wp-block-post-excerpt, .wp-block-post-date, .wp-block-post-terms) { margin: 0; }
.wp-block-post .wp-block-post-excerpt__excerpt { margin: 0; }
.wp-block-post .wp-block-post-excerpt__more-text { margin-block-start: var(--backtheme-space-2xs); }

/* The featured image fills the card's media slot the way the CSS mockups do. */
.backtheme-work-card__media .wp-block-post-featured-image,
.backtheme-product-card__media .wp-block-post-featured-image,
.backtheme-post-card__media .wp-block-post-featured-image { height: 100%; margin: 0; }

.backtheme-work-card__media .wp-block-post-featured-image img,
.backtheme-product-card__media .wp-block-post-featured-image img,
.backtheme-post-card__media .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The empty-state paragraph the filter script reveals when nothing matches. */
.wp-block-query .backtheme-work-empty { grid-column: 1 / -1; }


/* ============================================================
   4. Site logo and title

   Static markup was  a.backtheme-logo > img.backtheme-logo__mark + span
   Core gives a Site Logo block and a Site Title block, each with its own
   wrapper and its own anchor.
   ============================================================ */

.backtheme-logo .wp-block-site-logo { margin: 0; line-height: 1; }

/* The wordmark keeps the body's inherited line-height: .backtheme-logo__text
   never set one, and forcing line-height:1 here made the lockup 11px shorter
   than the static site's. */
.backtheme-logo .wp-block-site-title { margin: 0; }

.backtheme-logo .wp-block-site-logo a { display: block; }

.backtheme-logo .wp-block-site-logo img {
  width: 28px;
  height: 28px;
  flex: none;
  transition: transform var(--backtheme-dur-base) var(--backtheme-ease-spring);
}

.backtheme-logo:hover .wp-block-site-logo img { transform: rotate(-6deg) scale(1.06); }

/* Site Title renders as a heading element; inside the logo lockup it is
   wordmark, not hierarchy, so it takes the wordmark's type. */
.backtheme-logo .wp-block-site-title,
.backtheme-logo .wp-block-site-title a {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.032em;
  color: var(--backtheme-fg);
}


/* ============================================================
   5. Post content prose

   backtheme-sections.css ALREADY styles .backtheme-prose — its margins,
   headings, links, blockquotes and its custom list bullets (a grid with a
   ::before marker, not list-style). Nothing here may restate any of that.

   An earlier version of this file did, and because this stylesheet loads
   last it won a fight it should never have entered: `list-style: disc`
   replaced the design's own bullets on every article.

   What is left is only for content the static site never had, because it had
   no editor: images, figures and code blocks that a WordPress author can now
   insert.
   ============================================================ */

.backtheme-prose :where(figure, .wp-block-image) { margin: 0; }
.backtheme-prose :where(img) { border-radius: var(--backtheme-r-md); }

.backtheme-prose :where(pre, code) {
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--1);
}

.backtheme-prose pre {
  padding: var(--backtheme-space-s);
  border: 1px solid var(--backtheme-line);
  border-radius: var(--backtheme-r-md);
  background: var(--backtheme-surface-2);
  overflow-x: auto;
}

/*
 * .backtheme-prose goes ON core/post-content's wrapper, not on the <article>
 * around it.
 *
 * The first attempt put it on the <article> and flattened the wrapper with
 * display:contents. That fixes layout boxes but NOT selector matching —
 * `display: contents` does not change the DOM tree, so
 * `.backtheme-prose > * + *` still saw one child, the wrapper, and every gap
 * between paragraphs vanished: 85px missing from a single article.
 *
 * Naming the wrapper itself means the blocks are genuinely its children and
 * all ten .backtheme-prose rules apply as written.
 */


/* ============================================================
   6. Pagination, search and comments

   All three reuse components the static site already had. Pagination and
   search are handled entirely in inc/block-bridge.php by putting the existing
   class names onto Core's markup; only comments, which the static site has no
   equivalent for at all, need rules of their own.
   ============================================================ */

/* inc/block-bridge.php puts Core's pagination markup into the design's own
   .backtheme-pagination component, so there is no pagination styling here.
   The single exception is the ellipsis Core inserts when there are more pages
   than it lists — a state the static site never had, because its pagination
   was three hand-written page links. It is given the component's own link
   shape minus the box, rather than a new appearance. */
.backtheme-pagination__link.is-dots {
  border-color: transparent;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

/* inc/block-bridge.php puts .backtheme-input and .backtheme-button on the
   field and the button; only the gap between them is left to set. */
.wp-block-search__inside-wrapper { gap: var(--backtheme-space-2xs); }

.wp-block-comments .comment-respond,
.wp-block-comments .wp-block-comment-template { margin: 0; }
.wp-block-comment-template li { margin-block-start: var(--backtheme-space-m); }

/* The wordmark is set lowercase here rather than in the markup, so the real
   site name still reaches the accessibility tree and the document title.
   inc/block-bridge.php supplies the <span> that colours its second half. */
.backtheme-logo .wp-block-site-title { text-transform: lowercase; }
.backtheme-logo .wp-block-site-title span { color: var(--backtheme-brand-ink); }


/* ============================================================
   7. Component details that lived in the static markup

   A few one-off elements in the static markup carried a hand-written
   style="--reveal-delay:…". A block cannot carry an inline custom property
   through the editor, so the values are set here instead, unchanged.

   The chip dot used to be here too, drawn as .backtheme-chips li::before.
   That was wrong for the same reason the pagination styles were: the design
   already has a .backtheme-chip__dot element, and redrawing it in this file
   meant two definitions of one dot. It is now inserted as the real element by
   backtheme_bridge_list_items(), and this file has no opinion about it.
   ============================================================ */

/*
 * Reveal delays.
 *
 * Most staggering is handled by [data-stagger], which numbers a grid's
 * children at render time. These few elements are not children of a
 * staggered container — they sit alongside one — so they kept a hand-written
 * style="--reveal-delay:…" in the static markup. The values are unchanged.
 */
.backtheme-hero__visual      { --reveal-delay: 180ms; }
.backtheme-page-hero__visual { --reveal-delay: 200ms; }
.backtheme-form-card         { --reveal-delay: 80ms; }

/* The footer link columns are Navigation blocks; the static site used plain
   lists. Same visual result, but the Navigation block brings its own flex
   container that has to be told to stack. */
.backtheme-footer__links .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--backtheme-space-2xs);
}


/* ============================================================
   8. Cascade conflicts with Core's own block CSS

   wp-block-library.css is printed by WordPress after the BackTheme
   stylesheets, so where Core and BackTheme target the same element with
   the same specificity, Core wins on source order. Two components were
   affected. Both are fixed by raising specificity, not by changing values:
   every value below is read straight from the BackTheme rule it restores.

   Elsewhere the same conflict is avoided rather than patched — button rows
   use the flow layout so Core never emits .is-layout-flex on them at all.
   ============================================================ */

/*
 * .wp-block-navigation declares display:flex, which un-hid the desktop menu
 * on phones and pushed the mode toggle and hamburger off-screen.
 * Restores .backtheme-nav's own display rules verbatim.
 */
.backtheme-header .backtheme-nav.wp-block-navigation { display: none; }

@media (min-width: 1060px) {
  .backtheme-header .backtheme-nav.wp-block-navigation {
    display: flex;
    align-items: center;
    gap: 2px;
  }
}

/* Core gives every button a wrapper div; it must add no box of its own. */
.wp-block-button { margin: 0; }
.backtheme-header__cta-wrap { margin: 0; gap: 0; display: contents; }

/* Under 420px the hero's two calls to action go full width. Core's wrapper
   sits between .backtheme-hero__actions and the anchor the width applies to,
   so the width has to pass through it. */
@media (max-width: 420px) {
  .backtheme-hero__actions .wp-block-button { width: 100%; }
}

/* The technology band carried style="padding-block:var(--backtheme-space-xl)"
   inline. A Group block cannot, so the one-off value gets a class. */
.backtheme-tech-band { padding-block: var(--backtheme-space-xl); }

/* Core sets text-align:center on .wp-block-button__link. BackTheme buttons
   centre their contents with flexbox, so this changes nothing today — but it
   would silently centre a label that wrapped onto a second line, where the
   static site left it aligned to the start. */
a.backtheme-button.wp-block-button__link { text-align: inherit; }

/* The industries header carried style="margin-bottom:var(--backtheme-space-m)"
   inline; a Group block cannot, so the one-off value gets a class. */
.backtheme-section-header--gap-m { margin-bottom: var(--backtheme-space-m); }


/* ============================================================
   9. Blocks that wrap their own output

   core/post-content and core/post-excerpt each render a wrapper around the
   text. Where a BackTheme card puts that text straight into a grid or flex
   container, the wrapper becomes the single child and the container's gap
   stops applying between the paragraphs — .backtheme-work-card__text lost
   9px of spacing exactly this way.

   `display: contents` removes the wrapper from layout while leaving it in
   the DOM, so the paragraphs become direct children again and the card's own
   rules apply unchanged. Scoped to the cards that need it: elsewhere (an
   article body, say) the wrapper is harmless and useful.
   ============================================================ */

.backtheme-work-card__text .wp-block-post-content,
.backtheme-product-card__body > .wp-block-post-content,
.backtheme-work-card__kicker .wp-block-post-excerpt__excerpt,
.backtheme-post-card__excerpt .wp-block-post-excerpt__excerpt,
.backtheme-product-card__meta .wp-block-post-excerpt__excerpt,
.backtheme-testimonial__quote .wp-block-post-content { display: contents; }

/* core/post-excerpt puts the class on its wrapper but the text in a <p>
   inside it. The typography is inherited, so only the box needs flattening. */
.backtheme-work-card__kicker,
.backtheme-product-card__meta .wp-block-post-excerpt,
.backtheme-post-card__excerpt { display: block; }

/* The portfolio results region.
   On the static site one element was both the grid and the thing the filter
   script queried. Core's Post Template has to BE the grid (it renders the
   <ul>), so the region became a wrapper around it. .backtheme-work-empty was
   a grid child with grid-column: 1 / -1; as a child of the wrapper it simply
   spans the full width, which is the same result. */
.backtheme-work-results > .backtheme-work-empty { grid-column: auto; }

/* The CTA's lead paragraph carried style="text-align:center" inline. */
.backtheme-lead--centred { text-align: center; }

/* Two more inline styles from the static markup that a Group block cannot carry. */
.backtheme-product-feature__cta { margin-top: var(--backtheme-space-2xs); }
.backtheme-inset__lead { margin-bottom: var(--backtheme-space-xs); }


/* ============================================================
   10. Core's first-child margin reset

   Core's flow layout emits

       .wp-block-group-is-layout-flow > :first-child { margin-block-start: 0 }

   to stop a container's block gap doubling up at its top edge. BackTheme
   sets blockGap to 0 and lets components own their spacing, so that reset
   has nothing useful to do here — it only interferes, and at two classes of
   specificity it beats the component rule it is interfering with.

   It is restated below wherever a BackTheme component deliberately puts a
   margin on its first child. Each value is copied from the rule it restores
   and has to stay in step with it; the geometry check in the QA suite is
   what catches it if one drifts.
   ============================================================ */

@media (min-width: 980px) {
  /* backtheme-sections.css: .backtheme-product-feature__media insets itself
     on three sides so the app window sits inside the panel's border. Core's
     reset removed the top inset and pulled the window 36px out of line. */
  .backtheme-product-feature > .backtheme-product-feature__media {
    margin-block-start: var(--backtheme-space-l);
  }
}

/* backtheme-sections.css: .backtheme-product-grid separates itself from the
   Marketplace feature above it. As a Post Template it is the Query block's
   first child, so Core's reset removed that separation.

   Audited against every BackTheme rule that sets a non-zero top margin:
   these two are the only ones that land on a first child. The rest
   (.backtheme-hero__actions, .backtheme-cta__actions, .backtheme-pagination,
   .backtheme-prose) always follow a sibling, and the `margin-top: auto`
   ones push themselves down rather than away from an edge. */
.wp-block-query > .backtheme-product-grid { margin-block-start: var(--backtheme-space-m); }


/* ============================================================
   11. Header and footer details

   Three things the static markup did with an inline style or an element
   that Core supplies differently.
   ============================================================ */

/* The footer's inner container carried style="position:relative;z-index:1"
   so the brand glow behind it stays behind it. */
.backtheme-footer__body { position: relative; z-index: 1; }

/* The footer tagline carried style="font-size:var(--backtheme-step--1)". */
.backtheme-footer__tagline { font-size: var(--backtheme-step--1); }

/* Core's .wp-block-navigation-item__content declares display:block and wins
   on source order; .backtheme-nav__link is an inline-flex row that centres
   its own contents. */
.backtheme-nav__link.wp-block-navigation-item__content,
.backtheme-drawer__link.wp-block-navigation-item__content { display: inline-flex; }

/*
 * Navigation link colour.
 *
 * Core's Navigation block ships
 *
 *     .wp-block-navigation
 *       .wp-block-navigation-item__content.wp-block-navigation-link__content
 *       { color: inherit }
 *
 * Three classes — 0,3,0 — which beats every .backtheme-nav__link rule,
 * including :hover and [aria-current] at 0,2,0. Left alone, nav links sat at
 * the header's full-strength text colour and neither the hover state nor the
 * current-page state changed anything.
 *
 * Restated below at 0,3,0 so source order decides, and this file loads after
 * wp-block-library. The values are the ones from backtheme-components.css;
 * nothing new is invented. The current-page underline is a ::after with its
 * own background and was never affected.
 */
.backtheme-nav .wp-block-navigation-item__content.backtheme-nav__link { color: var(--backtheme-fg-muted); }
.backtheme-nav .wp-block-navigation-item__content.backtheme-nav__link:hover { color: var(--backtheme-fg); }
.backtheme-nav .wp-block-navigation-item__content.backtheme-nav__link[aria-current="page"] { color: var(--backtheme-fg); }

.backtheme-drawer__nav .wp-block-navigation-item__content.backtheme-drawer__link { color: var(--backtheme-fg); }
/* The drawer has no hover colour of its own in backtheme-components.css —
   only a current-page colour. Adding one here would be a design change. */
.backtheme-drawer__nav .wp-block-navigation-item__content.backtheme-drawer__link[aria-current="page"] { color: var(--backtheme-brand-ink); }


/* ============================================================
   12. Social links

   core/social-links is used because it is what makes the row editable — an
   editor can add a network, reorder one or change a URL without opening a
   file. It arrives with its own sizing system though: a --wp--social-icon-size
   custom property, 24px icons, its own padding and a per-network background.
   inc/block-bridge.php already swaps its artwork for BackTheme's sprite and
   puts .backtheme-social on the anchor; the rules below switch off the
   sizing so the component's own 40px pill takes over.

   Every value here comes from .backtheme-social in backtheme-components.css.
   ============================================================ */

.backtheme-socials.wp-block-social-links {
  gap: var(--backtheme-space-3xs);
  padding: 0;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  align-items: normal;
}

.backtheme-socials .wp-social-link {
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  line-height: inherit;
  /*
   * The colour is set HERE, on the list item, because that is where Core
   * sets its per-network #fff. Core then paints the anchor with
   *   .wp-block-social-links .wp-block-social-link.wp-social-link
   *     .wp-block-social-link-anchor { color: currentColor }
   * at 0,4,0, so colouring the anchor directly is out-specified and the white
   * wins anyway. Colouring the item lets currentColor carry the right value
   * down instead of fighting it.
   */
  color: var(--backtheme-fg-muted);
}

.backtheme-socials .wp-social-link:hover { color: var(--backtheme-on-brand); }

/* The anchor is the pill. Core sets display:block, padding and a fixed size
   on it, all of which have to give way to the component's grid centring. */
.backtheme-socials .wp-social-link a.backtheme-social {
  display: grid;
  line-height: inherit; /* Core sets line-height: 0 on the anchor. */
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--backtheme-r-full);
  border: 1px solid var(--backtheme-line);
  background: var(--backtheme-surface-1);
}

.backtheme-socials .wp-social-link:hover a.backtheme-social {
  border-color: transparent;
  background: var(--backtheme-grad-brand);
  transform: translateY(-2px);
  box-shadow: var(--backtheme-shadow-md);
}

.backtheme-socials .wp-social-link a.backtheme-social svg { width: 17px; height: 17px; }

/* The contact panel's ordered list carried style="position:relative;z-index:1"
   so it sits above the panel's glow. */
.backtheme-check-list--stacked { position: relative; z-index: 1; }

/* Where a media slot holds BOTH a mockup and a featured image — the blog
   cards, so a post can use either — the mockup cannot also BE the slot, and
   its wrapper would otherwise sit between the slot and the illustration and
   take over the sizing. display:contents removes it from layout while
   leaving aria-hidden in place, which is exactly what is wanted: the
   illustration is still hidden from assistive technology. */
.backtheme-post-card__thumb > .wp-block-backtheme-mockup { display: contents; }

/* The reading time was an unclassed <span> inside .backtheme-post-card__meta,
   inheriting that row's mono type, size and colour. As a bound paragraph it
   needs the same treatment and no box of its own. */
.backtheme-post-card__readtime { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }

/*
 * A quote's inner paragraph must not restyle the quote.
 *
 * The static markup was <blockquote>text</blockquote>. core/quote renders
 * <blockquote><p>text</p></blockquote>, and `.backtheme-prose p` then repaints
 * that paragraph in the muted body colour, undoing the blockquote's own
 * colour, size and line-height. Inheriting hands the blockquote's rules back.
 */
.backtheme-prose blockquote p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}