@layer components {
  .story-main {
    background-color: var(--color-bg);
  }

  .story-hero {
    padding-block: var(--space-16);
  }

  .story-hero-grid {
    align-items: center;
  }

  .story-hero-media {
    display: flex;
    justify-content: center;
  }

  .story-hero-card {
    max-width: 420px;
  }

  .story-hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
  }

  .story-hero-meta-text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .story-breadcrumb {
    border-bottom: 1px solid var(--color-border-subtle);
    background-color: var(--color-bg-elevated);
  }

  .story-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gray-500);
  }

  .story-breadcrumb-list li + li::before {
    content: "/";
    margin-inline: var(--space-2);
    color: var(--color-gray-300);
  }

  .story-breadcrumb-list a {
    color: var(--color-gray-700);
  }

  .story-breadcrumb-list a:hover {
    color: var(--color-primary);
  }

  .story-origin-grid,
  .story-founders-grid,
  .story-moments-grid,
  .story-philosophy-grid,
  .story-community-grid,
  .story-journey-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
  }

  .story-figure {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-bg-elevated);
    box-shadow: var(--shadow-subtle);
  }

  .story-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .story-figure figcaption {
    padding: var(--space-5) var(--space-7);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    background: linear-gradient(90deg, #f5ede2, #f0e2d2);
  }

  .story-text-block {
    max-width: 620px;
  }

  .story-text-block h2:not(:last-child),
  .story-text-block h3:not(:last-child) {
    margin-bottom: var(--space-4);
  }

  .story-text-block p:last-child {
    margin-bottom: 0;
  }

  .story-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
    margin-top: var(--space-8);
  }

  .story-pillar h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
  }

  .story-inline-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-7);
  }

  .story-moments-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-7);
  }

  .story-community-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  }

  .story-community-card,
  .story-sustainability-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .story-community-card a {
    align-self: flex-start;
  }

  .story-sustainability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .story-journey-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  }

  .story-invite-panel {
    display: grid;
    gap: var(--space-5);
  }

  .story-invite-copy {
    margin-bottom: 0;
  }

  .story-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
  }
}

@media (max-width: 1024px) {
  .story-origin-grid,
  .story-founders-grid,
  .story-moments-grid,
  .story-philosophy-grid,
  .story-community-grid,
  .story-journey-grid {
    gap: var(--space-9);
  }

  .story-pillars-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .story-hero {
    padding-block: var(--space-12);
  }

  .story-origin-grid,
  .story-founders-grid,
  .story-moments-grid,
  .story-philosophy-grid,
  .story-community-grid,
  .story-journey-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-figure-left,
  .story-figure-right {
    order: -1;
  }

  .story-inline-ctas,
  .story-moments-links,
  .story-invite-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .story-hero-card {
    padding: var(--space-8);
  }

  .story-hero-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}