/* Homepage sections */

/* Hero */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-5);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-charcoal) 0%, var(--c-black) 100%); /* fallback while image loads */
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 25%; /* mobile: keep the figure in frame */
}
@media (min-width: 48rem) {
  .hero__bg img {
    object-position: 50% 25%;
  }
}
.hero__bg::after {
  /* darkens image so headline stays readable: bottom fade + left side on wide screens */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(10 10 10 / 0.35) 0%, rgb(10 10 10 / 0.15) 35%, rgb(10 10 10 / 0.92) 100%),
    linear-gradient(90deg, rgb(10 10 10 / 0.6) 0%, transparent 60%);
}
.hero__inner {
  position: relative;
}
.hero h1 {
  max-width: 14ch;
}
.hero__support {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--c-cream);
}
.ctas {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Story */
.story {
  position: relative;
  overflow: hidden;
  background: var(--c-olive);
}
.story__bg {
  position: absolute;
  inset: 0;
}
.story__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.story__bg::after {
  /* dark olive wash: keeps the big headline readable and ties the photo to the palette */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(10 10 10 / 0.85) 0%, rgb(10 10 10 / 0.55) 60%, rgb(10 10 10 / 0.7) 100%),
    rgb(42 45 33 / 0.45);
}
.story__inner {
  position: relative;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: 56rem;
}
.story__text p {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  text-transform: uppercase;
}

/* Featured: THE STORIES grid (components.css) */
.featured__cta {
  margin-top: var(--space-4);
}

/* Philosophy */
.philosophy__inner {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: 56rem;
}
.philosophy__inner p:not(.eyebrow) {
  max-width: 32rem;
  color: var(--c-text-muted);
}



/* What comes next: the five chapters. 01 is live; 02–05 stay dimmed and unlinked until they exist. */
.roadmap-section {
  border-top: 1px solid var(--c-line);
}
.roadmap {
  margin-top: calc(var(--space-4) + var(--space-2));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-2);
}
.roadmap__item {
  display: block;
  color: var(--c-text);
}
.roadmap__item--live {
  grid-column: 1 / -1;
}
.roadmap__media {
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.roadmap__media > * {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: filter var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.roadmap__media .ph {
  border: 0;
}
/* Future chapters read as locked dark frames; file names are listed in ASSETS_README.md */
.roadmap__media .ph span {
  display: none;
}
.roadmap__item:not(.roadmap__item--live) .roadmap__media > * {
  filter: grayscale(1) brightness(0.45);
}
.roadmap__item:not(.roadmap__item--live):hover .roadmap__media > * {
  filter: grayscale(1) brightness(0.7);
}
.roadmap__item--live:hover .roadmap__media > *,
.roadmap__item--live:focus-visible .roadmap__media > * {
  transform: scale(1.03);
}
.roadmap__num {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--c-cream);
}
.roadmap__name {
  margin-top: 0.25rem;
  font-size: var(--fs-h3);
  line-height: 1;
}
.roadmap__state {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.roadmap__item--live .roadmap__state {
  color: var(--c-cream);
}
.roadmap__item--live .roadmap__state::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--c-red);
  vertical-align: 0.05em;
}
.roadmap__item:not(.roadmap__item--live) :is(.roadmap__num, .roadmap__name) {
  color: var(--c-text-muted);
}
/* Phones: the live chapter as a wide banner above the 2x2 future chapters */
@media (max-width: 47.99rem) {
  .roadmap__item--live .roadmap__media > * {
    aspect-ratio: 16 / 10 !important;
    object-position: 50% 35%;
  }
}
@media (min-width: 48rem) {
  .roadmap {
    grid-template-columns: repeat(5, 1fr);
  }
  .roadmap__item--live {
    grid-column: auto;
  }
}
/* Tablet: five narrow columns, so keep chapter names on one line */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .roadmap__name {
    font-size: 1.25rem;
  }
}
/* 01 uses the-corner.jpg (2:1): aim the portrait card at cornerman + fighter together */
.roadmap__item--live .roadmap__media img {
  object-position: 66% 50%;
}