/* ==========================================================================
   FORTHWAY — Layout
   Container, grid, section rhythm, hero geometry.

   NOTE ON SPECIFICITY: section padding is set in exactly one place
   (.section). Nothing else sets vertical padding on a section. If you need
   a different rhythm, add a modifier class (.section--tight) rather than
   targeting the element, or the two rules will cancel each other out.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 900px; }

/* --- Section rhythm ------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--space-section);
}

.section--tight  { padding-block: calc(var(--space-section) * 0.55); }
.section--flush-top { padding-block-start: 0; }

.section-head {
  display: grid;
  gap: var(--space-m);
  margin-block-end: var(--space-xl);
  max-width: 900px;
}

/* Hairline that runs the width of the content, used between major sections */
.rule {
  height: 1px;
  background: linear-gradient(
    to right,
    var(--line) 0%,
    var(--line-bright) 22%,
    var(--line) 60%,
    transparent 100%
  );
}

/* --- Grid ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-m);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3 { grid-template-columns: 1fr; }
}

/* Split layout: sticky label column + scrolling content column */
.split {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.split__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-l));
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-l); }
  .split__aside { position: static; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--space-l)) var(--space-xl);
  overflow: hidden;
}

/* The signature element. Sits behind the copy, full-bleed, and is the only
   canvas on the page. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}

.hero__canvas[data-ready='true'] { opacity: 1; }

/* Vignette so the type stays legible over the lanes no matter where a
   bright block happens to be. Pure CSS, costs nothing. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--ground) 2%, rgba(14, 17, 22, 0.75) 34%, rgba(14, 17, 22, 0.1) 70%),
    radial-gradient(120% 80% at 50% 100%, transparent 40%, var(--ground) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__title {
  max-width: 16ch;
  margin-block: var(--space-m) var(--space-l);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-l);
  align-items: center;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-top: var(--border);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  border-top: var(--border);
  padding-block: var(--space-xl) var(--space-l);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-l);
  margin-block-end: var(--space-xl);
}

@media (max-width: 700px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  border-top: var(--border);
  color: var(--fog-dim);
}