@layer components {

  /* Named "compact", not "single": `.editorial-single` already means the
     rail-based single (blog / resource / case-study) in entry-content.css and
     single-service.css. This is the no-sidebar layout that replaces it. */

  /* Breakout grid — everything lands on the measure track by default; only
     .editorial-compact__breakout opts into the wider one. This is what keeps a
     sidebar-less page from reading as a single unbroken ribbon, and it's why
     the media band needs no negative margins to escape the column. */
  .editorial-compact {
    --editorial-breakout-side:
      calc((var(--content-width-breakout) - var(--content-width-measure)) / 2);

    display: grid;
    grid-template-columns:
      [breakout-start] minmax(0, var(--editorial-breakout-side))
      [measure-start]  min(var(--content-width-measure), 100%) [measure-end]
      minmax(0, var(--editorial-breakout-side)) [breakout-end];
    justify-content: center;
    row-gap: var(--editorial-flow-gap);
  }

  .editorial-compact > * {
    grid-column: measure;
    min-inline-size: 0;
  }

  .editorial-compact__breakout {
    grid-column: breakout;
  }

  .editorial-compact__article {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
  }

  .editorial-compact__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap);
  }

  .editorial-compact__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--container-gap);
    padding-block-start: var(--space-l);
    border-block-start: var(--divider);
  }

  .editorial-compact__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap);
  }

  .editorial-compact__footer-label {
    font-family: var(--font-heading);
    font-size: var(--text-overline);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  /* The banner shares the article's measure so the page holds one column edge
     from the title down. Scoped to the compact single — the shared page-banner
     keeps its full-width container everywhere else. */
  .editorial-compact-page .page-banner .container {
    max-inline-size: var(--content-width-measure);
  }


  /* BYLINE STRIP — the blog's answer to the event fact strip. */

  .byline-strip {
    display: flex;
    align-items: center;
    gap: var(--container-gap);
    padding-block: var(--space-l);
    border-block: var(--divider);
  }

  .byline-strip__author {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .byline-strip__avatar {
    inline-size: var(--avatar-l);
    block-size: var(--avatar-l);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--avatar-bg);
  }

  .byline-strip__avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .byline-strip__name {
    font-family: var(--font-heading);
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .byline-strip__role {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .byline-strip__meta {
    display: flex;
    gap: var(--container-gap);
    flex-shrink: 0;
  }

  .byline-strip__meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .byline-strip__meta-label {
    font-family: var(--font-heading);
    font-size: var(--text-overline);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .byline-strip__meta-value {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--text-main);
  }


  /* CONTENTS — native <details>. Collapsed is the no-JS default, which is the
     safe one: a closed disclosure is still operable, an open one that can't
     close is not. IIFE 20 opens it on desktop and fills the count. */

  .editorial-toc {
    padding-block: var(--space-l);
    border-block-start: var(--divider);
  }

  /* Nothing to list — IIFE 20 bails under two headings and never fills the
     mount, so the disclosure would otherwise sit there opening onto nothing. */
  .editorial-toc:not(:has(.toc)) {
    display: none;
  }

  .editorial-toc__summary {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    list-style: none;
    min-block-size: var(--tap-target-min);
  }

  .editorial-toc__summary::-webkit-details-marker {
    display: none;
  }

  .editorial-toc__summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .editorial-toc__label {
    font-family: var(--font-heading);
    font-size: var(--text-overline);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .editorial-toc__count {
    font-size: var(--text-overline);
    color: var(--text-subtle);
  }

  .editorial-toc__chevron {
    margin-inline-start: auto;
    color: var(--text-muted);
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .editorial-toc[open] .editorial-toc__chevron {
    transform: rotate(180deg);
  }

  /* The summary already says "Contents" — IIFE 20's own title would repeat it. */
  .editorial-toc .toc__title {
    display: none;
  }

  .editorial-toc .toc__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: 0;
    margin: 0;
  }

  .editorial-toc .toc__link {
    font-family: var(--font-heading);
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-link);
    text-decoration: none;
  }

  .editorial-toc .toc__link:hover {
    text-decoration: underline;
    text-underline-offset: var(--underline-offset-m);
  }

  /* Desktop puts the label in its own column and hangs the list beside it —
     the horizontal offset is what stops it reading as a settings menu. */
  @media (min-width: 48em) {
    .editorial-toc__summary {
      inline-size: 7.5rem;
      float: inline-start;
      min-block-size: 0;
    }

    .editorial-toc[open] .vimta-toc-mount {
      margin-inline-start: calc(7.5rem + var(--space-xl));
    }

    .editorial-toc::after {
      content: "";
      display: block;
      clear: both;
    }
  }


  .editorial-compact__author {
    display: flex;
    align-items: flex-start;
    gap: var(--container-gap);
    padding: var(--card-padding);
    border: var(--card-border);
    border-radius: var(--radius-l);
    background: var(--card-bg);
  }

  .editorial-compact__author-avatar {
    inline-size: var(--avatar-xl);
    block-size: var(--avatar-xl);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--avatar-bg);
  }

  .editorial-compact__author-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .editorial-compact__author-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-inline-size: 0;
  }

  .editorial-compact__author-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-overline);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .editorial-compact__author-name {
    font-family: var(--font-heading);
    font-size: var(--h6);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .editorial-compact__author-bio {
    font-size: var(--text-s);
    line-height: var(--leading-body);
    color: var(--text-muted);
  }


  @media (max-width: 48em) {
    .editorial-compact__footer,
    .byline-strip {
      flex-direction: column;
      align-items: flex-start;
    }

    .byline-strip__meta {
      inline-size: 100%;
    }

    .editorial-compact__author {
      flex-direction: column;
    }
  }

}