.page-header {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--header-height));
    padding-block: calc(var(--header-height) + var(--space-3xl)) var(--space-3xl);
    border-bottom: 1px solid var(--color-border);
    background: transparent;
  }

.journal-index-hero__label {
    margin-bottom: var(--space-lg);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .journal-index-hero__title {
    max-width: 16ch;
    font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: var(--color-text);
  }

  .journal-index-hero__subhead {
    max-width: 42ch;
    margin-top: var(--space-xl);
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--color-text-muted);
  }

  .journal-index {
    position: relative;
    z-index: 1;
    padding-block: var(--space-4xl);
    border-top: 1px solid var(--color-border);
  }

  .journal-index__inner {
    max-width: 52rem;
  }

  .journal-index__list {
    display: grid;
    gap: var(--space-2xl);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .journal-index__empty {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--color-text-subtle);
  }

.journal-card {
    border: 1px solid var(--color-border);
    background-color: rgba(19, 19, 19, 0.72);
  }

  .journal-card__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    color: inherit;
    transition: border-color var(--transition-fast);
  }

  .journal-card__link:hover .journal-card__title {
    color: var(--color-text);
  }

  .journal-card__media {
    overflow: hidden;
    background-color: var(--color-bg-deep);
  }

  .journal-card__media img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 55% 15%;
    filter: grayscale(0.6) contrast(1.08) brightness(0.38);
  }

  .journal-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
  }

  .journal-card__date {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .journal-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
  }

  .journal-card__description {
    margin: 0;
    flex: 1;
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-subtle);
  }

  .journal-card__cta {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
  }

  @media (min-width: 640px) {
    .journal-card__link {
      grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    }

    .journal-card__media img {
      height: 100%;
      min-height: 100%;
    }
  }

body:has(.journal-post-layout) .site-header--overlay::before {
    inset: 0;
  }

.journal-post-layout {
    --journal-post-width: min(70ch, 720px, calc(100vw - 2 * var(--space-lg)));
    --journal-rail-width: 4.75rem;
    position: relative;
    width: var(--journal-post-width);
    margin-inline: auto;
    margin-top: 0;
    margin-bottom: var(--space-4xl);
  }

  .journal-post-rail {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    width: var(--journal-rail-width);
    background: color-mix(in srgb, var(--color-bg-deep) 10%, transparent);
    pointer-events: none;
    z-index: 0;
  }

  .journal-post-rail--left {
    left: calc(50% - var(--journal-post-width) / 2 - var(--journal-rail-width));
    border-left: 1px solid var(--color-border);
  }

  @media (max-width: 900px) {
    .journal-post-layout {
      --journal-post-width: min(70ch, calc(100vw - 2 * var(--space-md)));
      margin-bottom: calc(var(--space-4xl) + 3.5rem);
    }

    .journal-post-rail--left {
      display: none;
    }
  }

  .journal-post {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    background: transparent;
    border: none;
  }

  .journal-post::before {
    content: '';
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: calc(50% - var(--journal-post-width) / 2);
    width: var(--journal-post-width);
    background: color-mix(in srgb, var(--color-bg-mid) 78%, transparent);
    backdrop-filter: blur(10px);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    pointer-events: none;
    z-index: 0;
  }

  .journal-post__inner {
    position: relative;
    z-index: 1;
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-xl) var(--space-2xl);
  }

  @media (max-width: 900px) {
    .journal-post::before {
      display: none;
    }

    .journal-post {
      min-height: 0;
      background: color-mix(in srgb, var(--color-bg-mid) 88%, transparent);
      backdrop-filter: blur(10px);
      border: 1px solid var(--color-border);
    }

    .journal-post__inner {
      padding: calc(var(--header-height) + var(--space-md)) var(--space-lg) var(--space-2xl);
    }

    .journal-post__prose p,
    .journal-post__prose li {
      font-size: clamp(1.0625rem, 4.2vw, 1.125rem);
      line-height: 1.82;
      color: rgba(245, 241, 232, 0.94);
    }

    .journal-post::before {
      top: var(--header-height);
    }
  }

  @media (min-width: 640px) {
    .journal-post__inner {
      padding: calc(var(--header-height) + var(--space-xl)) var(--space-2xl) var(--space-3xl);
    }
  }

  .journal-post__label {
    margin: 0 0 var(--space-md);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .journal-post__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.03em;
    color: var(--color-text);
  }

  .journal-post__byline {
    margin: var(--space-lg) 0 0;
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .journal-post__byline-sep {
    margin-inline: var(--space-sm);
  }

  .journal-post__prose {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
  }

  .journal-post__prose p,
  .journal-post__prose li {
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 2.8vw, var(--text-lg));
    line-height: 1.78;
    color: rgba(245, 241, 232, 0.9);
  }

  .journal-post__prose p + p,
  .journal-post__prose ul,
  .journal-post__prose ol {
    margin-top: var(--space-lg);
  }

  .journal-post__prose hr {
    margin: var(--space-2xl) 0;
    border: none;
    border-top: 1px solid var(--color-border);
  }

  .journal-post__prose blockquote {
    margin: var(--space-xl) 0;
    padding-left: var(--space-lg);
    border-left: 3px solid var(--color-accent);
    font-size: clamp(1rem, 2.5vw, var(--text-base));
    line-height: 1.7;
    color: rgba(245, 241, 232, 0.82);
  }

  .journal-post__prose em {
    color: var(--color-text);
    font-style: italic;
  }

  .journal-post__prose a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .journal-post__prose a:hover {
    color: var(--color-accent);
  }

  .journal-post__links {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
  }

.journal-post-nav {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: calc(50% + var(--journal-post-width) / 2);
    width: var(--journal-rail-width, 4.75rem);
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
    background: color-mix(in srgb, var(--color-bg-deep) 10%, transparent);
    border-right: 1px solid var(--color-border);
  }

  .journal-post-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .journal-post-nav__item {
    line-height: 1;
  }

  .journal-post-nav__link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--type-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(245, 241, 232, 0.78);
    border-bottom: 1px solid transparent;
    transition:
      color var(--transition-fast),
      border-color var(--transition-fast);
  }

  .journal-post-nav__link:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-border-strong);
  }

  .journal-post-nav__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  .journal-post-nav__current {
    font-family: var(--font-display);
    font-size: var(--type-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .journal-post-nav__muted {
    font-family: var(--font-display);
    font-size: var(--type-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.14);
    user-select: none;
  }

  @media (max-width: 900px) {
    .journal-post-nav {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      min-width: 0;
      min-height: 0;
      height: auto;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 0;
      padding-bottom: env(safe-area-inset-bottom, 0);
      background: color-mix(in srgb, var(--color-bg-deep) 92%, transparent);
      backdrop-filter: blur(10px);
      border-right: none;
      border-top: 1px solid var(--color-border);
    }

    .journal-post-nav__list {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-sm);
      width: 100%;
      padding: var(--space-sm) var(--space-md);
    }

    .journal-post-nav__item {
      flex: 1;
      text-align: center;
    }

    .journal-post-nav__item:first-child {
      text-align: left;
    }

    .journal-post-nav__item:last-child {
      text-align: right;
    }
  }

.support-resources {
    margin-top: var(--space-4xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
  }

  .support-resources__heading {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .support-resources__copy {
    margin: 0;
    font-size: clamp(1rem, 2.5vw, var(--text-base));
    line-height: 1.75;
    color: rgba(245, 241, 232, 0.86);
  }

body:has(.journal-post-layout) .site-header--overlay::before { inset: 0; }