/* ==========================================================================
   Layout — shell, top bar, sections, hero, route, footer
   ========================================================================== */

.shell {
  position: relative;
  z-index: 3;
  padding-left: var(--rail);
  overflow-x: clip;
}

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

/* --- Top bar ----------------------------------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur-mid) var(--ease-out);
}

.topbar__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(0.8125rem, 2.8vw, 1.0625rem);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark span {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.12em;
  background: var(--signal);
  text-indent: -9999px;
  overflow: hidden;
}

.topbar__meta { display: flex; align-items: center; gap: var(--s-3); }
@media (max-width: 34rem) { .topbar__meta .micro:first-child { display: none; } }

/* --- Section frame ------------------------------------------------------ */

.section { position: relative; padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-6); }

.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.section__head .micro { flex: 0 0 auto; }
.section__rule { flex: 1 1 auto; height: 1px; }

.section__head > .micro:last-child { display: none; }
@media (min-width: 48rem) { .section__head > .micro:last-child { display: block; } }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--bar-h) + var(--s-4));
  padding-bottom: var(--s-4);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  position: relative;
  z-index: 2;
}

.hero__title {
  font-size: var(--t-hero);
  line-height: 0.79;
  letter-spacing: -0.012em;
  margin: 0;
}
/* Accented capitals ink well above cap height in a condensed face. Measured at
   207px: "COMPANIA." with the tilde and acute reaches 199px of ink inside a
   163.5px line box, a 36px collision with the line above. English clears at
   0.79 because it has no accents. Inert until a Spanish page ships. */
:lang(es) .hero__title { line-height: 0.97; }

.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; }
.hero__line--signal > span {
  display: inline-block;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 0.07em 0.1em 0.03em;
  margin-left: -0.09em;
}

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  align-items: end;
}

@media (min-width: 62rem) {
  .hero__foot {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
    gap: var(--s-5);
  }
}

/* Elevation profile drawn behind the hero */
.hero__elevation {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: min(34vh, 21rem);
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
  /* #000 here is a mask stencil, not a colour — it never paints. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
          mask-image: linear-gradient(to bottom, transparent, #000 55%);
}
.hero__elevation svg { width: 100%; height: 100%; }
.hero__elevation .elev-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
  opacity: 0.22;
  vector-effect: non-scaling-stroke;
}
.hero__elevation .elev-fill { fill: url(#elevGrad); }

/* --- Manifesto ---------------------------------------------------------- */

.manifesto__lead {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
@media (min-width: 62rem) {
  .manifesto__lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4) var(--s-4);
  }
  .manifesto__lead h2   { grid-column: 1 / -1; }
  .manifesto__lead .lede { grid-column: 2; max-width: 46ch; }
}

.principles {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 52rem) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.principle {
  background: var(--paper);
  padding: var(--s-4) var(--s-3) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: background var(--dur-mid) var(--ease-out);
}
.principle:hover { background: var(--paper-raised); }
.principle .principle__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 4.75rem);
  line-height: 0.8;
  color: var(--rule-strong);
  transition: color var(--dur-mid) var(--ease-out);
}
.principle:hover .principle__n { color: var(--ink); }
.principle h3 { font-size: 1.3125rem; letter-spacing: 0.01em; }
.principle p { color: var(--ink-soft); font-size: 0.9375rem; }

/* --- The route ----------------------------------------------------------- */

.route { display: grid; gap: 0; border-top: 1px solid var(--rule); }

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
@media (min-width: 52rem) {
  .stage {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--s-4);
    align-items: start;
  }
}
.stage .stage__km {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--ink-mute);
}
.stage[data-now] .stage__km { color: var(--ink); }
.stage h3 { font-size: clamp(1.625rem, 3vw, 2.375rem); }
.stage p { color: var(--ink-soft); max-width: 46ch; }

.stage .stage__now {
  display: inline-block;
  margin-top: var(--s-1);
  padding: 0.2rem 0.5rem;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* --- Final CTA (inverted: hi-vis field) ---------------------------------- */

.finale {
  background: var(--signal);
  color: var(--signal-ink);
  padding-block: var(--s-7);
  position: relative;
  overflow: hidden;
}
.finale h2 { font-size: var(--t-xxl); letter-spacing: -0.025em; }
.finale .micro { color: color-mix(in srgb, var(--signal-ink) 62%, transparent); }
.finale__grid { display: grid; gap: var(--s-4); }
@media (min-width: 62rem) {
  .finale__grid {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.85fr);
    gap: var(--s-5);
    align-items: end;
  }
}
.finale p.lede { color: color-mix(in srgb, var(--signal-ink) 78%, transparent); }

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

.footer { border-top: 1px solid var(--rule); padding-block: var(--s-4); }
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer__links a { transition: color var(--dur-fast) var(--ease-out); }
.footer__links a:hover { color: var(--ink); }

/* --- Colour zones ---------------------------------------------------------
   The zone palettes live in tokens.css, where every colour value belongs.
   Here we only apply them, and grant the one exception the ink zone earns.
   ------------------------------------------------------------------------- */

.zone-raised,
.zone-deep,
.zone-ink { background: var(--paper); }

.zone-ink { color: var(--ink); }

/* Inside the ink zone the hi-vis clears 14.75 as a letterform, so it may be
   type again here and only here. */
.zone-ink .micro--signal {
  background: transparent;
  color: var(--signal);
  padding: 0;
}