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

  .journal-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);
  }

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

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

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

  .journal-hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(3rem, 9vw, 7rem);
    letter-spacing: -0.075em;
  }

  .journal-hero-copy p {
    max-width: 68ch;
    font-size: var(--cz-body-lg);
  }

  .journal-hero-actions,
  .journal-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cz-space-sm);
  }

  /* -----------------------------
     FEATURED GUIDE CARD
  ----------------------------- */
  .journal-feature-card {
    position: relative;
    display: grid;
    gap: var(--cz-space-md);
    overflow: hidden;
    padding: clamp(1.35rem, 4vw, 2rem);
    border: 1px solid rgb(var(--cz-accent-2-rgb) / 0.28);
    border-radius: var(--cz-radius-xl);
    background:
      radial-gradient(circle at 18% 0%, rgb(var(--cz-accent-rgb) / 0.28), transparent 17rem),
      radial-gradient(circle at 92% 18%, rgb(var(--cz-accent-2-rgb) / 0.14), transparent 15rem),
      linear-gradient(145deg, rgb(24 15 46 / 0.98), rgb(9 13 22 / 0.96) 52%, rgb(15 10 30 / 0.98));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.06),
      0 22px 60px rgb(0 0 0 / 0.34);
  }

  .journal-feature-card::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -55%;
    width: 42%;
    height: 170%;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgb(255 255 255 / 0.012) 28%,
      rgb(255 255 255 / 0.055) 50%,
      rgb(255 255 255 / 0.012) 72%,
      transparent 100%
    );
    filter: blur(14px);
    opacity: 0.45;
    transform: rotate(14deg) translateX(-120%);
    animation: journalSweep 8.5s ease-in-out infinite;
  }

  .journal-feature-card > * {
    position: relative;
    z-index: 1;
  }

  .journal-feature-label {
    width: fit-content;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgb(var(--cz-accent-2-rgb) / 0.32);
    border-radius: var(--cz-radius-pill);
    background: rgb(var(--cz-accent-rgb) / 0.14);
    color: #c9adff;
    font-size: var(--cz-xs);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .journal-feature-card h2 {
    max-width: 10ch;
  }

  .journal-feature-card a {
    color: var(--cz-accent-soft);
    font-weight: 900;
  }

  @keyframes journalSweep {
    0%,
    68% {
      transform: rotate(14deg) translateX(-120%);
      opacity: 0;
    }

    76% {
      opacity: 0.45;
    }

    100% {
      transform: rotate(14deg) translateX(420%);
      opacity: 0;
    }
  }

  /* -----------------------------
     POST GRID
  ----------------------------- */
  .journal-posts-section {
    padding-block: 0 var(--cz-space-2xl);
  }

  .journal-post-grid {
    display: grid;
    gap: var(--cz-space-lg);
  }

  .journal-post-card a {
    position: relative;
    display: grid;
    min-height: 100%;
    gap: var(--cz-space-lg);
    overflow: hidden;
    padding: clamp(1.2rem, 3vw, 1.5rem);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--cz-radius-xl);
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.02)),
      linear-gradient(135deg, rgb(22 28 42 / 0.92), rgb(17 22 34 / 0.88));
    color: var(--cz-text);
    transition:
      transform var(--cz-duration) var(--cz-ease),
      border-color var(--cz-duration) var(--cz-ease),
      box-shadow var(--cz-duration) var(--cz-ease),
      background var(--cz-duration) var(--cz-ease);
  }

  .journal-post-card a:hover {
    transform: translateY(-4px);
    border-color: rgb(var(--cz-accent-2-rgb) / 0.42);
    background:
      radial-gradient(circle at 16% 0%, rgb(var(--cz-accent-rgb) / 0.12), transparent 14rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.025)),
      linear-gradient(135deg, rgb(24 30 44 / 0.94), rgb(16 21 32 / 0.9));
    box-shadow:
      var(--cz-shadow-card),
      0 0 0 1px rgb(var(--cz-accent-rgb) / 0.08),
      0 0 22px rgb(var(--cz-accent-rgb) / 0.11);
  }

  .journal-post-card-featured a {
    border-color: rgb(var(--cz-accent-2-rgb) / 0.28);
    background:
      radial-gradient(circle at 12% 0%, rgb(var(--cz-accent-rgb) / 0.28), transparent 18rem),
      radial-gradient(circle at 88% 26%, rgb(var(--cz-accent-2-rgb) / 0.16), transparent 16rem),
      linear-gradient(145deg, rgb(24 15 46 / 0.98), rgb(9 13 22 / 0.96) 52%, rgb(15 10 30 / 0.98));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.06),
      0 22px 60px rgb(0 0 0 / 0.34);
  }

  .journal-post-card-featured a::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -55%;
    width: 42%;
    height: 170%;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgb(255 255 255 / 0.012) 28%,
      rgb(255 255 255 / 0.055) 50%,
      rgb(255 255 255 / 0.012) 72%,
      transparent 100%
    );
    filter: blur(14px);
    opacity: 0.45;
    transform: rotate(14deg) translateX(-120%);
    animation: journalSweep 8.5s ease-in-out infinite;
  }

  .journal-post-card-featured a > * {
    position: relative;
    z-index: 1;
  }

  .journal-post-card-featured a:hover {
    border-color: rgb(var(--cz-accent-2-rgb) / 0.52);
    background:
      radial-gradient(circle at 12% 0%, rgb(var(--cz-accent-rgb) / 0.34), transparent 18rem),
      radial-gradient(circle at 88% 26%, rgb(var(--cz-accent-2-rgb) / 0.2), transparent 16rem),
      linear-gradient(145deg, rgb(27 17 54 / 0.98), rgb(9 13 22 / 0.96) 52%, rgb(18 12 36 / 0.98));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.07),
      0 24px 68px rgb(0 0 0 / 0.38),
      0 0 0 1px rgb(var(--cz-accent-rgb) / 0.15),
      0 0 34px rgb(var(--cz-accent-rgb) / 0.18);
  }

  .journal-post-icon {
    display: grid;
    place-items: center;
    width: 3.65rem;
    aspect-ratio: 1;
    border: 1px solid rgb(var(--cz-accent-2-rgb) / 0.34);
    border-radius: var(--cz-radius-lg);
    background: rgb(var(--cz-accent-rgb) / 0.14);
    color: #c9adff;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.06),
      0 12px 26px rgb(var(--cz-accent-rgb) / 0.12);
    font-size: 1.45rem;
  }

  .journal-post-body {
    display: grid;
    gap: var(--cz-space-sm);
  }

  .journal-post-body span {
    color: var(--cz-accent-soft);
    font-size: var(--cz-xs);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .journal-post-body time {
    width: fit-content;
    color: rgb(255 255 255 / 0.58);
    font-size: var(--cz-small);
    font-weight: 800;
  }

  .journal-post-body h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.04em;
  }

  .journal-post-body p {
    color: var(--cz-text-muted);
  }

  .journal-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cz-space-md);
    margin-block-start: auto;
    color: var(--cz-text-soft);
  }

  .journal-post-meta em {
    font-style: normal;
    font-size: var(--cz-small);
    font-weight: 850;
  }

  .journal-post-meta i {
    color: #c9adff;
  }

  /* -----------------------------
     FINAL CTA
  ----------------------------- */
  .journal-final-cta {
    padding-block: 0 var(--cz-space-3xl);
  }

  .journal-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;
  }

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

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

  /* -----------------------------
     RESPONSIVE
  ----------------------------- */
  @media (min-width: 860px) {
    .journal-hero-grid {
      grid-template-columns: minmax(0, 0.85fr) minmax(360px, 0.72fr);
    }

    .journal-post-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .journal-post-card-featured {
      grid-column: span 2;
    }
  }

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

    .journal-hero-actions .cz-btn,
    .journal-final-actions .cz-btn {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .journal-feature-card::before,
    .journal-post-card-featured a::before {
      animation: none !important;
    }
  }
}