/*
 * THE LANDING PAGE, KENNEL FIRST (web/landing.html, web/js/landing-home.js), 2026-10-20. Loaded last, after lh.css and landing-v2.css,
 * and written on the lh tokens (--lh-*): near-black ground, one accent (green) for the one primary action and for nothing else,
 * Barlow Condensed for the headline and the step titles, Instrument Sans for everything you read, the 4/8 space ladder, hairlines
 * instead of boxes. Owner ruling 2026-10-21: the page is the welcome with two choices, three steps, a top-three proof and the founding line, then the footer. Mobile first: one column and a swiping strip on a phone, three steps and five hounds across
 * from 900px, 16px gutters, nothing scrolls sideways (the strip scrolls inside its own row).
 *
 * MOTION: the first screen fades up once (under a second) and the strip's cards follow, all inside prefers-reduced-motion:
 * no-preference; reduced motion gets the finished page.
 */

body.landing--home { background: var(--lh-bg); color: var(--lh-ink); }
body.landing--home main { display: block; max-width: none; padding: 0; }

/* ---- the welcome ------------------------------------------------------------------------------------------------ */
/* OWNER RULING 2026-10-21: one big welcome, two big choices. Flat: no gradients, no glow, one accent. */
.kh { max-width: 920px; margin: 0 auto; padding: clamp(40px, 11vh, 120px) var(--lh-s4) var(--lh-s6); text-align: center; }
body.landing .kh__title {
  margin: 0; font-family: var(--lh-font-display); font-weight: 700; font-style: normal; text-transform: none;
  font-size: clamp(44px, 9.4vw, 96px); line-height: .98; letter-spacing: var(--lh-track-display); color: var(--lh-ink); text-wrap: balance;
}
body.landing .kh__sub { max-width: 34em; margin: var(--lh-s4) auto 0; font-family: var(--lh-font-text); font-size: var(--lh-fs-md); line-height: 1.45; color: var(--lh-ink2); text-wrap: balance; }
.kh-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lh-s3); margin: var(--lh-s6) auto 0; max-width: 720px; text-align: left; }
.kh-choice {
  display: flex; flex-direction: column; gap: var(--lh-s2); justify-content: center; min-height: 112px; box-sizing: border-box; padding: var(--lh-s4) var(--lh-s5);
  border-radius: var(--lh-r-md); background: var(--lh-soft); color: var(--lh-ink); text-decoration: none;
  transition: background-color var(--lh-t-base) var(--lh-ease), transform var(--lh-t-fast) var(--lh-ease);
}
.kh-choice:hover { background: var(--lh-soft-2); }
.kh-choice:active { transform: scale(.985); }
.kh-choice__ask { font-size: var(--lh-fs-sm); font-weight: 500; color: var(--lh-ink2); }
.kh-choice__go { font-family: var(--lh-font-display); font-size: clamp(26px, 5vw, 34px); font-weight: 700; line-height: 1.05; letter-spacing: var(--lh-track-display); }
.kh-choice--primary { background: var(--lh-accent); color: var(--accent-ink, #04140B); }
.kh-choice--primary:hover { background: var(--accent-hi, #4BE08F); }
.kh-choice--primary .kh-choice__ask { color: inherit; opacity: .75; }
@media (min-width: 640px) { .kh-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- the strip of real hounds -------------------------------------------------------------------------------- */
.kh-strip, .kh-how { max-width: 920px; margin: 0 auto; padding-left: var(--lh-s4); padding-right: var(--lh-s4); }
.kh-strip { padding-top: var(--lh-s6); padding-bottom: var(--lh-s6); }
.kh-strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lh-s3); margin-bottom: var(--lh-s3); }
body.landing .kh-strip__title, body.landing .kh-how__title {
  margin: 0; font-family: var(--lh-font-text); font-size: var(--lh-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lh-mute);
}
.kh-strip__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--lh-s1) var(--lh-s4); }
.kh-strip__more { font-size: var(--lh-fs-sm); color: var(--lh-ink2); text-decoration: none; }
.kh-strip__more:hover { color: var(--lh-ink); }
.kh-strip__row {
  list-style: none; margin: 0 calc(var(--lh-s4) * -1); padding: 0 var(--lh-s4) var(--lh-s2); display: flex; gap: var(--lh-s3);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kh-strip__row::-webkit-scrollbar { display: none; }
.kh-strip__empty { flex: 1; padding: var(--lh-s4) 0; color: var(--lh-mute); font-size: var(--lh-fs-base); }
.kh-hound { flex: 0 0 184px; scroll-snap-align: start; min-width: 0; }
.kh-hound__link {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "face name" "rec rec" "ret ret"; column-gap: var(--lh-s3); row-gap: var(--lh-s2);
  height: 100%; box-sizing: border-box; padding: var(--lh-s3) var(--lh-s3) var(--lh-s4); border-radius: var(--lh-r-md);
  background: var(--lh-soft); color: var(--lh-ink); text-decoration: none; transition: background-color var(--lh-t-base) var(--lh-ease);
}
.kh-hound__link:hover { background: var(--lh-soft-2); }
.kh-hound__face { grid-area: face; align-self: center; line-height: 0; }
/* a hound's name may run to two lines before it is cut (QA, 2026-10-25: "Gematria Ho..." at 390); a longer name still ends in "…" */
.kh-hound__name { grid-area: name; align-self: center; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; font-size: var(--lh-fs-base); font-weight: 600; line-height: 1.25; }
.kh-hound__rec { grid-area: rec; align-self: start; margin-top: var(--lh-s1); white-space: nowrap; font-size: var(--lh-fs-sm); color: var(--lh-mute); font-variant-numeric: tabular-nums; }
.kh-hound__ret { grid-area: ret; margin-top: 0; font-family: var(--lh-font-display); font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lh-ink2); }
.kh-hound__ret small { font-family: var(--lh-font-text); font-size: var(--lh-fs-xs); font-weight: 500; color: var(--lh-mute); }
.kh-hound__ret--up { color: var(--lh-win); }
.kh-hound__ret--down { color: var(--lh-loss); }
.kh-hound--small .kh-hound__ret { color: var(--lh-mute); }
@media (min-width: 640px) {
  .kh-strip__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .kh-hound { flex: none; }
}

/* ---- how it works: three small steps with the real hound art ------------------------------------------------------ */
.kh-how { padding-top: var(--lh-s5); padding-bottom: var(--lh-s6); }
.kh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lh-s3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-step { display: flex; flex-direction: column; align-items: center; gap: var(--lh-s1); text-align: center; min-width: 0; }
.kh-step__art { display: block; line-height: 0; }
.kh-step__art svg { width: 72px; height: 72px; border-radius: var(--lh-r-md); }
.kh-step__n { margin-top: var(--lh-s2); font-size: var(--lh-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lh-mute); }
body.landing .kh-step h2 {
  margin: 0; font-family: var(--lh-font-display); font-weight: 700; font-style: normal; text-transform: none;
  font-size: clamp(17px, 4.6vw, 26px); line-height: 1.1; letter-spacing: var(--lh-track-display); color: var(--lh-ink);
}
@media (min-width: 640px) { .kh-step__art svg { width: 104px; height: 104px; } .kh-steps { gap: var(--lh-s5); } }

/* ---- the founding line ----------------------------------------------------------------------------------------- */
.kh-offer { max-width: 920px; margin: 0 auto; padding: var(--lh-s2) var(--lh-s4) var(--lh-s8); text-align: center; font-size: var(--lh-fs-base); color: var(--lh-ink2); }
.kh-offer[hidden] { display: none; }
.kh-offer__more { margin-left: var(--lh-s2); color: var(--lh-mute); text-decoration: underline; text-underline-offset: 3px; }
.kh-offer__more:hover { color: var(--lh-ink); }

body.landing--home :focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 3px; }

/* ---- motion ---------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .kh > * { animation: kh-in .6s var(--lh-ease) both; }
  .kh > :nth-child(2) { animation-delay: 80ms; }
  .kh > :nth-child(3) { animation-delay: 160ms; }
  .kh-hound { animation: kh-in .5s var(--lh-ease) both; }
  .kh-strip__row > :nth-child(2) { animation-delay: 60ms; }
  .kh-strip__row > :nth-child(3) { animation-delay: 120ms; }
}
@keyframes kh-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }