/* ============================================================
   Ponderosa Pixels — About page styles
   Loaded after site.css.
   ============================================================ */

/* ------------------------------------------------------------
   Story section — alternating cinematic chapters
   ------------------------------------------------------------ */
.story-section {
  position: relative;
  padding: clamp(96px, 12vw, 168px) 0;
  overflow: hidden;
}
.story-section--light { background: var(--bg-primary); }
.story-section--dark  {
  background: var(--color-pine);
  color: var(--color-stone);
}
.story-section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/patterns/topo_map_overlay_dark_with_transparency.svg');
  background-size: 1400px;
  background-repeat: repeat;
  opacity: 0.07;
  pointer-events: none;
}
.story-section--dark h2,
.story-section--dark h3,
.story-section--dark p { color: var(--color-stone); }
.story-section .container { position: relative; z-index: 1; }

.story-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.story-section--reverse .story-section__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.story-section--reverse .story-section__media { order: 2; }
.story-section--reverse .story-section__text  { order: 1; }

.story-section__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
}
.story-section__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.story-section__media::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 24%; height: 1px;
  background: var(--color-canyon);
}
.story-section__media::before {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 1px; height: 24%;
  background: var(--color-canyon);
  z-index: 1;
}

/* Variant for the owner-portrait placeholder — taller 3:4 ratio */
.story-section__media--portrait { aspect-ratio: 3 / 4; }

/* Text column */
.story-section__text { display: flex; flex-direction: column; gap: 24px; }
.story-section__meta { display: flex; flex-direction: column; gap: 16px; }
.story-section__numeral {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: clamp(64px, 8vw, 116px);
  line-height: 0.9;
  letter-spacing: var(--ls-tight);
  color: var(--color-canyon);
}
.story-section__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 16ch;
}
.story-section__title .canyon {
  color: var(--color-canyon);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.story-section__prose p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  max-width: 56ch;
  color: inherit;
}
.story-section__prose p + p { margin-top: 18px; }

/* Pull-stat — small trust callout under the prose (FAA badge, etc.) */
.pull-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 20px;
  border: 1px solid currentColor;
  border-color: var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--fg-secondary);
  align-self: flex-start;
  margin-top: 8px;
}
.story-section--dark .pull-stat { border-color: rgba(145, 163, 146, 0.3); color: var(--color-sage); }
.pull-stat strong {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-canyon);
  letter-spacing: var(--ls-tight);
}
.pull-stat span {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .story-section__grid,
  .story-section--reverse .story-section__grid { grid-template-columns: 1fr; gap: 40px; }
  .story-section--reverse .story-section__media { order: 1; }
  .story-section--reverse .story-section__text  { order: 2; }
  .story-section__media { aspect-ratio: 4 / 3; }
  .story-section__media--portrait { aspect-ratio: 3 / 4; max-width: 480px; }
}