@layer pages.article {
  .article-page {
    position: relative;
    overflow: clip;
  }

  .article-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(circle at 22% 12%, rgb(var(--cz-accent-rgb) / 0.2), transparent 30rem),
      radial-gradient(circle at 82% 18%, rgb(var(--cz-accent-2-rgb) / 0.13), transparent 28rem);
  }

  .article-hero {
    padding-block: clamp(4rem, 8vw, 7rem) var(--cz-space-2xl);
  }

  .article-hero-grid {
    display: grid;
    gap: var(--cz-space-xl);
    align-items: center;
  }

  .article-hero-copy {
    display: grid;
    gap: var(--cz-space-lg);
  }

  .article-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    color: var(--cz-text-muted);
    font-size: var(--cz-small);
    font-weight: 850;
  }

  .article-back-link:hover {
    color: var(--cz-accent-soft);
  }

  .article-hero h1 {
    max-width: 12ch;
    font-size: clamp(3rem, 8vw, 6.5rem);
    letter-spacing: -0.075em;
  }

  .article-hero p {
    max-width: 70ch;
    font-size: var(--cz-body-lg);
  }

  .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--cz-border);
    border-radius: var(--cz-radius-pill);
    background: rgb(255 255 255 / 0.045);
    color: var(--cz-text-soft);
    font-size: var(--cz-small);
    font-weight: 800;
  }

  .article-meta i {
    color: #c9adff;
  }

  .article-hero-media {
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding: 0.7rem;
    border-radius: calc(var(--cz-radius-xl) + 0.7rem);
  }

  .article-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(
      120deg,
      rgb(var(--cz-accent-rgb) / 0.18),
      rgb(var(--cz-accent-2-rgb) / 0.58),
      rgb(255 255 255 / 0.14),
      rgb(var(--cz-accent-rgb) / 0.18)
    );
    background-size: 260% 260%;
    animation: articleFrameShift 7s linear infinite;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .article-hero-media::after {
    content: "";
    position: absolute;
    inset: 0.7rem;
    border-radius: var(--cz-radius-xl);
    background:
      linear-gradient(180deg, transparent, rgb(5 7 12 / 0.3)),
      radial-gradient(circle at 72% 12%, rgb(var(--cz-accent-rgb) / 0.16), transparent 18rem);
    pointer-events: none;
  }

  .article-hero-media img {
    width: 100%;
    height: 100%;
    min-height: 28rem;
    object-fit: cover;
    border-radius: var(--cz-radius-xl);
    box-shadow: var(--cz-shadow-soft);
  }

  @keyframes articleFrameShift {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .article-content-section {
    padding-block: 0 var(--cz-space-2xl);
  }

  .article-layout {
    display: grid;
    gap: var(--cz-space-xl);
    align-items: start;
  }

  .article-sidebar {
    display: none;
  }

  .article-card {
    display: grid;
    gap: var(--cz-space-lg);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--cz-border);
    border-radius: var(--cz-radius-xl);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.022)), rgb(16 23 34 / 0.72);
    box-shadow: var(--cz-shadow-card);
  }

  .article-card h2 {
    margin-block-start: var(--cz-space-lg);
    font-size: clamp(1.65rem, 4vw, 2.7rem);
    letter-spacing: -0.055em;
    scroll-margin-block-start: calc(var(--cz-header-h) + var(--cz-space-xl));
  }

  .article-card h2:first-child {
    margin-block-start: 0;
  }

  .article-card p,
  .article-card li {
    color: var(--cz-text-soft);
    font-size: var(--cz-body);
    line-height: 1.8;
  }

  .article-card ul,
  .article-card ol {
    display: grid;
    gap: 0.65rem;
    padding-inline-start: 1.25rem;
  }

  .article-card blockquote {
    margin: 0;
    padding: clamp(1rem, 3vw, 1.4rem);
    border: 1px solid rgb(var(--cz-accent-2-rgb) / 0.32);
    border-radius: var(--cz-radius-lg);
    background:
      radial-gradient(circle at 0% 0%, rgb(var(--cz-accent-rgb) / 0.18), transparent 16rem), rgb(255 255 255 / 0.045);
    color: var(--cz-text);
    font-size: var(--cz-body-lg);
    font-weight: 850;
  }

  .article-card a {
    color: var(--cz-accent-soft);
    font-weight: 850;
    text-decoration: underline;
    text-decoration-color: rgb(var(--cz-accent-2-rgb) / 0.38);
    text-underline-offset: 0.22em;
  }

  .article-final-cta {
    padding-block: 0 var(--cz-space-3xl);
  }

  .article-final-card {
    display: grid;
    justify-items: center;
    gap: var(--cz-space-lg);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid rgb(var(--cz-accent-2-rgb) / 0.22);
    border-radius: var(--cz-radius-xl);
    background:
      radial-gradient(circle at 50% 0%, rgb(var(--cz-accent-rgb) / 0.18), transparent 22rem),
      linear-gradient(135deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025)), rgb(16 23 34 / 0.72);
    box-shadow: var(--cz-shadow-card);
    text-align: center;
  }

  .article-final-card h2 {
    max-width: 12ch;
  }

  .article-final-card p {
    max-width: 58ch;
  }

  .article-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cz-space-sm);
  }

  @media (min-width: 980px) {
    .article-hero-grid {
      grid-template-columns: minmax(0, 0.86fr) minmax(380px, 0.76fr);
    }

    .article-layout {
      grid-template-columns: 260px minmax(0, 1fr);
    }

    .article-sidebar {
      position: sticky;
      inset-block-start: calc(var(--cz-header-h) + var(--cz-space-lg));
      display: grid;
      gap: var(--cz-space-md);
      padding: 1rem;
      border: 1px solid var(--cz-border);
      border-radius: var(--cz-radius-lg);
      background: rgb(255 255 255 / 0.045);
    }

    .article-sidebar strong {
      font-size: var(--cz-small);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .article-sidebar nav {
      display: grid;
      gap: 0.25rem;
    }

    .article-sidebar a {
      padding: 0.45rem 0.55rem;
      border-radius: var(--cz-radius-sm);
      color: var(--cz-text-muted);
      font-size: var(--cz-small);
      font-weight: 750;
      transition:
        background var(--cz-duration-fast) var(--cz-ease),
        color var(--cz-duration-fast) var(--cz-ease),
        transform var(--cz-duration-fast) var(--cz-ease);
    }

    .article-sidebar a:hover,
    .article-sidebar a.is-active {
      transform: translateX(0.15rem);
      background: rgb(var(--cz-accent-rgb) / 0.16);
      color: #fff;
    }
  }

  @media (max-width: 700px) {
    .article-hero h1 {
      font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .article-final-actions .cz-btn {
      width: 100%;
    }

    .article-hero-media img {
      min-height: 20rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .article-hero-media::before {
      animation: none !important;
    }
  }
}