/*
 * blog.css: listing + article surfaces, linked ONLY on /{locale}/blog pages.
 *
 * Extends the live `freight-signage-dark` direction rather than introducing one:
 * every colour, font, space and easing token below comes from landing.css, which
 * is always loaded first. Nothing here restyles a shared component.
 *
 * Layer order is declared in landing.css (`@layer reset, tokens, typography,
 * layout, components, sections, animations, responsive, a11y`). Re-listing the
 * names here does not reset that order, it just lets these rules join the right
 * layers, so a blog `components` rule still loses to a landing `responsive` one.
 *
 * Mobile-first: base rules are the 375px layout; 768px and 1280px widen it.
 */

@layer reset, tokens, typography, layout, components, sections, animations, responsive, a11y;

@layer tokens {
  :root {
    /*
     * The article reading measure, shared by the head, cover, prose and FAQ so
     * they line up as one column.
     *
     * Deliberately rem, not ch. `ch` resolves against the element's own font
     * size, and the prose runs at --text-lg while the head runs at the body
     * size, so an identical `72ch` on both produced two visibly different
     * widths. 42rem is 672px, which is under 72ch at the prose size and lands
     * at roughly 70 characters of actual lowercase Inter, the point where a
     * long read stays comfortable.
     */
    --blog-measure: 42rem;
  }
}

@layer components {

  /* NOTE: the sticky mobile signup bar needs no rules here. landing.css already
     hides `.mobile-cta` by default, shows it under 768px, and pads the body to
     clear it. Repeating either rule at a `min-width: 768px` breakpoint would
     collide with landing's `max-width: 768px` one at exactly 768px. */

  .blog-main {
    display: block;
    background:
      repeating-linear-gradient(0deg, var(--bg-grid) 0px, var(--bg-grid) 1px, transparent 1px, transparent 64px),
      repeating-linear-gradient(90deg, var(--bg-grid) 0px, var(--bg-grid) 1px, transparent 1px, transparent 64px),
      var(--bg-base);
  }

  /* Raw-format affordances: RSS on the listing, markdown on both. The mono
     marker reads as a file-type stamp on a waybill rather than an icon. */
  .blog-format-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }
  .blog-format-link:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
  }
  .blog-format-link__mark {
    font-weight: 600;
    color: var(--sky);
    letter-spacing: 0.08em;
  }

  /* Category tag. Each pinned category gets one of the brand colours, so the
     listing colour-codes at a glance the way a manifest does. */
  .blog-tag {
    display: inline-block;
    padding: 0.25rem var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
  }
  .blog-tag--product-updates {
    color: var(--sky);
    background: var(--sky-glow);
    border-color: rgba(34, 167, 240, 0.25);
  }
  .blog-tag--guides {
    color: var(--green);
    background: var(--green-glow);
    border-color: rgba(135, 211, 124, 0.25);
  }
  .blog-tag--industry-insights {
    color: var(--amber);
    background: var(--amber-glow);
    border-color: rgba(255, 182, 39, 0.25);
  }
  .blog-tag--news {
    color: var(--red);
    background: var(--red-glow);
    border-color: rgba(239, 72, 54, 0.25);
  }

  /* Filter chips. 44px min target on every one. */
  .blog-chip {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  }
  .blog-chip:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
  }
  .blog-chip.is-active {
    color: var(--text-inverse);
    background: var(--sky);
    border-color: var(--sky);
  }

}

@layer sections {

  /* ---- Nav ------------------------------------------------------------ */
  /* landing.css defines `.site-nav` in THIS layer (not `components`), so these
     overrides must live here too: a `components` rule would lose to it no matter
     how late blog.css loads.

     It makes the nav `position: fixed` and lets the home hero pad itself to
     clear it. The blog pages have no such hero, so a fixed nav would sit on top
     of the listing hero. Sticky gives it real layout space to push that hero
     down, and the solid fill replaces a transparent-over-hero treatment that has
     nothing to sit on here.

     Sticky, not static, at EVERY width, and that is load-bearing twice over.
     `z-index` only applies to a positioned box, so a static nav dropped
     landing.css's `z-index: 100` on the floor and the `z-index: 99` mobile-menu
     overlay painted straight over the burger: the icon vanished the moment the
     menu opened and there was nothing left to click to close it. Sticky also
     keeps the burger on screen when the menu is opened further down the page.
     The old "static on mobile so the wrapped row does not eat the viewport"
     reasoning died with the wrap: the row is one line at every width now that
     the links fold into the burger. */
  .site-nav--solid {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-subtle);
  }

  /* Sticky is not enough on its own. nav.js locks the page with
     `overflow: hidden` on <body> while the drawer is open, and because <html>
     here sets `overflow-x: clip`, that lock does NOT propagate to the viewport:
     <body> becomes its own scroll container, so the sticky nav stops resolving
     against the viewport and snaps back to the document top, riding out of view
     with the page's scroll offset and taking the close button with it. Fixed is
     immune to the lock. Taking the nav out of flow shifts the page up by its own
     height, but that happens entirely behind the open overlay and reverts on
     close, so nothing visibly jumps. The home nav is fixed at all times, which
     is why only the blog needs this. */
  body.nav-is-open .site-nav--solid {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .site-nav__links .language-switcher__link.is-untranslated { opacity: 0.55; }

  /* ---- Listing hero -------------------------------------------------- */

  .blog-hero {
    padding: var(--space-7) 0 var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
  }
  .blog-hero__inner { width: var(--container); margin-inline: auto; }
  .blog-hero__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sky);
    margin-bottom: var(--space-3);
  }
  .blog-hero__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
  }
  .blog-hero__sub {
    max-width: 56ch;
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-5);
  }
  .blog-hero__formats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

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

  .blog-list-section { padding: var(--space-6) 0 var(--space-7); }
  .blog-list-section__inner { width: var(--container); margin-inline: auto; }

  .blog-filter { margin-bottom: var(--space-6); }
  .blog-filter__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
  }
  .blog-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .blog-filter__empty {
    margin-top: var(--space-5);
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  .blog-list { border-top: 1px solid var(--border-subtle); }

  .blog-row { border-bottom: 1px solid var(--border-subtle); }
  .blog-row__article {
    position: relative;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5) 0 var(--space-5) var(--space-4);
    transition: background var(--dur-fast);
  }
  /* Lane stripe on the leading edge, lit by the category colour on hover. */
  .blog-row__article::before {
    content: '';
    position: absolute;
    inset-block: var(--space-4);
    inset-inline-start: 0;
    width: 2px;
    background: var(--border-default);
    transition: background var(--dur-fast);
  }
  .blog-row:hover .blog-row__article::before,
  .blog-row:focus-within .blog-row__article::before { background: var(--sky); }
  .blog-row:hover .blog-row__article,
  .blog-row:focus-within .blog-row__article { background: var(--sky-subtle); }

  .blog-row__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .blog-row__date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
  .blog-row__title {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.02;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
  }
  /* Stretched link: the whole row is the target, so a thumb never has to find
     the headline. The rail and cover stay above it and remain selectable. */
  .blog-row__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .blog-row__link { transition: color var(--dur-fast); }
  .blog-row:hover .blog-row__link { color: var(--sky); }
  .blog-row__desc {
    max-width: 68ch;
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
  }
  .blog-row__meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
  .blog-row__cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
  }

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

  .blog-empty { padding: var(--space-8) 0; }
  .blog-empty__inner {
    width: var(--container-narrow);
    margin-inline: auto;
    padding: var(--space-6);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    text-align: center;
  }
  .blog-empty__title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
  .blog-empty__body {
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
  }

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

  .blog-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }
  .blog-pager__pages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    order: -1;
    width: 100%;
    justify-content: center;
  }
  .blog-pager__step,
  .blog-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }
  .blog-pager__step:hover,
  .blog-pager__page:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
  }
  .blog-pager__page.is-current {
    color: var(--text-inverse);
    background: var(--sky);
    border-color: var(--sky);
  }
  .blog-pager__step.is-disabled {
    opacity: 0.35;
    pointer-events: none;
  }

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

  .blog-article {
    width: var(--container);
    margin-inline: auto;
    padding: var(--space-6) 0 var(--space-7);
  }

  .blog-article__head {
    max-width: var(--blog-measure);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-6);
  }

  .blog-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
  }
  .blog-crumbs a { transition: color var(--dur-fast); }
  .blog-crumbs a:hover { color: var(--sky); }
  .blog-crumbs__sep { color: var(--border-strong); }

  .blog-article__title {
    font-size: var(--text-4xl);
    margin: var(--space-3) 0 var(--space-5);
    /* Hairline signage rule, the one flourish the article allows itself. */
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--sky);
  }

  .blog-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-5);
  }
  .blog-article__meta-item dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
  }
  .blog-article__meta-item dd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-primary);
  }

  .blog-article__cover {
    max-width: var(--blog-measure);
    margin-bottom: var(--space-6);
  }
  .blog-article__cover img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
  }

  /* ---- Prose --------------------------------------------------------- */

  .blog-prose {
    max-width: var(--blog-measure);
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--text-primary);
  }
  /* The lede answers the title (AEO), so it gets the weight to look like it. */
  .blog-prose > p:first-child {
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--text-primary);
  }
  .blog-prose p,
  .blog-prose ul,
  .blog-prose ol,
  .blog-prose blockquote,
  .blog-prose pre,
  .blog-prose table,
  .blog-prose figure { margin-bottom: var(--space-5); }
  .blog-prose > :last-child { margin-bottom: 0; }

  .blog-prose h2 {
    font-size: var(--text-2xl);
    margin: var(--space-7) 0 var(--space-4);
    scroll-margin-top: var(--space-7);
  }
  .blog-prose h3 {
    font-size: var(--text-xl);
    margin: var(--space-6) 0 var(--space-3);
    scroll-margin-top: var(--space-7);
  }
  /* T1298 renders h2/h3 with an id and no visible anchor symbol. Hovering the
     heading shows a mono ¶ marker in the margin that links to itself, so the
     anchor is discoverable without littering the prose. */
  .blog-prose h2,
  .blog-prose h3 { position: relative; }
  .blog-prose h2[id]:hover::before,
  .blog-prose h3[id]:hover::before {
    content: '#';
    position: absolute;
    inset-inline-start: -1.1em;
    color: var(--sky);
    font-family: var(--font-mono);
    font-weight: 500;
  }

  .blog-prose a {
    color: var(--sky);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast);
  }
  .blog-prose a:hover { color: var(--text-primary); }

  .blog-prose strong { color: var(--text-primary); font-weight: 600; }
  .blog-prose em { font-style: italic; }

  .blog-prose ul,
  .blog-prose ol { padding-inline-start: var(--space-5); }
  .blog-prose ul { list-style: disc; }
  .blog-prose ol { list-style: decimal; }
  .blog-prose li { margin-bottom: var(--space-2); }
  .blog-prose li::marker { color: var(--sky); }

  .blog-prose blockquote {
    padding: var(--space-4) var(--space-5);
    border-inline-start: 2px solid var(--green);
    background: var(--green-glow);
    color: var(--text-secondary);
  }
  .blog-prose blockquote > :last-child { margin-bottom: 0; }

  .blog-prose code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--amber);
  }
  .blog-prose pre {
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    overflow-x: auto;
  }
  .blog-prose pre code {
    padding: 0;
    background: none;
    color: var(--text-primary);
  }

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

  /* Tables can exceed the measure, so they scroll inside their own box rather
     than pushing the page sideways. */
  .blog-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  .blog-prose th,
  .blog-prose td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    text-align: start;
  }
  .blog-prose th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-raised);
  }

  .blog-prose hr {
    border: none;
    border-top: 1px dashed var(--border-default);
    margin: var(--space-6) 0;
  }

  /* ---- FAQ ----------------------------------------------------------- */

  .blog-faq {
    max-width: var(--blog-measure);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
  }
  .blog-faq__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-5);
    scroll-margin-top: var(--space-7);
  }
  .blog-faq__item {
    padding: var(--space-4) 0 var(--space-4) var(--space-4);
    border-inline-start: 2px solid var(--border-default);
    margin-bottom: var(--space-4);
    transition: border-color var(--dur-fast);
  }
  .blog-faq__item:hover { border-inline-start-color: var(--green); }
  .blog-faq__q {
    font-family: var(--font-display-alt);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
  }
  .blog-faq__a {
    color: var(--text-secondary);
    line-height: 1.7;
  }

  /* ---- Prev / next --------------------------------------------------- */

  .blog-neighbours {
    width: var(--container);
    margin-inline: auto;
    padding-bottom: var(--space-7);
  }
  .blog-neighbours__inner {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
  }
  .blog-neighbour {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast), background var(--dur-fast);
  }
  .blog-neighbour:hover {
    border-color: var(--sky);
    background: var(--sky-subtle);
  }
  .blog-neighbour--empty {
    border: none;
    padding: 0;
    min-height: 0;
  }
  .blog-neighbour--older { text-align: end; }
  .blog-neighbour__dir {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .blog-neighbour__title {
    font-family: var(--font-display-alt);
    font-weight: 700;
    color: var(--text-primary);
  }
  .blog-neighbours__all {
    margin-top: var(--space-4);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .blog-neighbours__all a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-secondary);
    transition: color var(--dur-fast);
  }
  .blog-neighbours__all a:hover { color: var(--sky); }

  /* ---- Bottom CTA band ----------------------------------------------- */

  .blog-cta {
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-raised);
    padding: var(--space-7) 0;
  }
  .blog-cta__inner {
    width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
  }
  .blog-cta__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: var(--space-3);
  }
  .blog-cta__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
  }
  .blog-cta__body {
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
  }
  .blog-cta__button { display: inline-flex; }

  /* NOTE: `.landing-footer__nav` (the Blog/Partners links added to the shared
     footer) is styled in landing.css, not here. landing_footer() renders on
     every page, so those rules must ship with the stylesheet every page loads. */
}

@layer responsive {

  /* NOTE: the mobile nav needs no rules here. The blog templates ship the same
     `.nav-burger` + `#mobile-menu` markup as the rest of the site and load
     nav.js, so landing.css's own breakpoints apply unchanged: burger from
     1024px down, nav signup button hidden at 768px where .mobile-cta takes
     over. The one blog-specific nav rule (sticky + its stacking context) is in
     the `sections` layer, where it can beat landing.css's `.site-nav`. */

  /* ---- 768px and up: tablet ------------------------------------------ */
  @media (min-width: 768px) {
    /* The nav is sticky at every width now (see the `sections` layer), so there
       is no tablet-and-up pinning rule to add here. */

    .blog-hero { padding: var(--space-8) 0 var(--space-7); }

    /* Manifest layout proper: mono date rail on the left, body on the right. */
    .blog-row__article {
      grid-template-columns: 12rem 1fr;
      gap: var(--space-5);
      padding-block: var(--space-6);
    }
    .blog-row__rail {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
    }

    .blog-pager__pages {
      order: 0;
      width: auto;
    }

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

  /* ---- 1280px and up: desktop ---------------------------------------- */
  @media (min-width: 1280px) {
    /* A cover joins the row as a third column instead of stacking under it. */
    .blog-row__article:has(.blog-row__cover) {
      grid-template-columns: 12rem 1fr 20rem;
    }
    .blog-row__cover { align-self: start; }

    /* Centre the reading column: the head, prose, FAQ and cover all share the
       same --blog-measure, so the article reads as one column, not a left rail. */
    .blog-article__head,
    .blog-article__cover,
    .blog-prose,
    .blog-faq { margin-inline: auto; }

    .blog-article { padding-block: var(--space-7) var(--space-8); }
  }
}

@layer a11y {

  /* Every interactive element on the blog surfaces gets the same visible ring. */
  .blog-chip:focus-visible,
  .blog-format-link:focus-visible,
  .blog-pager__step:focus-visible,
  .blog-pager__page:focus-visible,
  .blog-row__link:focus-visible,
  .blog-neighbour:focus-visible,
  .blog-crumbs a:focus-visible,
  .blog-prose a:focus-visible,
  .blog-neighbours__all a:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* The row is a stretched-link target, so the ring belongs on the row, not on
     the invisible ::after box. */
  .blog-row:focus-within { outline: none; }
  .blog-row__link:focus-visible { outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    .blog-format-link,
    .blog-chip,
    .blog-row__article,
    .blog-row__article::before,
    .blog-row__link,
    .blog-pager__step,
    .blog-pager__page,
    .blog-neighbour,
    .blog-faq__item,
    .blog-crumbs a,
    .blog-prose a,
    .blog-neighbours__all a {
      transition: none;
    }
  }
}