/* ── home.css ─────────────────────────────────────────────────────────────
   The home page is the only place the horizon is a fixed, scroll-reactive
   object. Everything here exists to give it room.                        */

.hero {
  padding-top: clamp(3rem, 1rem + 9vw, 7rem);
  padding-bottom: clamp(5rem, 2rem + 14vw, 11rem);
}

.hero h1 {
  font-weight: 350;
  max-width: 20ch;
  margin-bottom: var(--s4);
}

.hero__lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
}

/* ── the two truths · equal weight, never ranked ──────────────────────────
   Same padding, same radius, same type scale. If a future change makes one
   of these visually heavier than the other, it is a bug — the whole thesis
   is that neither half outranks the other.                                */
.grid--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--s4);
  align-items: start;
}

.truth {
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--line);
}

.truth h2 {
  margin-top: 0;
  font-size: var(--t-lg);
}

.truth--ground {
  background: var(--card);
  box-shadow: var(--sh-1);
}

/* .sky rebinds the local ink tokens (tokens.css), so this only sets form. */
.truth--sky {
  border-color: transparent;
  box-shadow: var(--sh-2);
}

.truth .go { margin-top: var(--s3); }

/* ── the ethic list ───────────────────────────────────────────────────── */
.ethic {
  list-style: none;
  padding: 0;
  margin: var(--s4) 0;
  display: grid;
  gap: var(--s3);
}

.ethic li {
  padding-left: var(--s3);
  border-left: var(--stroke) solid var(--line-strong);
  color: var(--ink-2);
}

.ethic strong { color: var(--ink); font-weight: 600; }

/* ── today strip ──────────────────────────────────────────────────────── */
tt-today[data-mode='strip'] {
  display: block;
  margin: var(--s3) 0 var(--s4);
}

@media (max-width: 34rem) {
  .hero { padding-bottom: var(--s6); }
  /* On small screens the fixed hero horizon has nowhere useful to sit, so
     base.css reduced-motion rules aside, it becomes a plain divider. */
  .horizon--hero { position: absolute; top: 0; }
}