/* Kinpath homepage.
 *
 * Loaded after policy.css, which owns the shared tokens, the font faces and the
 * policy-page furniture. Nothing here may change how the policy routes render —
 * every rule is scoped under .home or a home- prefix.
 *
 * THE PALETTE, AND WHY IT IS NOT THE LOGO ENLARGED
 *
 * Kinpath's mark is a white line on a gradient that runs magenta, violet,
 * indigo, cyan along its bottom-left-to-top-right diagonal. Those six colours
 * were read out of the shipping app icon rather than guessed:
 *
 *     #dc4090  #b63fb4  #9744cf  #6d5ef0  #529af0  #41bff0
 *
 * The obvious move is to make the page that gradient. It is the wrong move,
 * for three reasons that all point the same way. Body text over a saturated
 * cyan-to-magenta field needs a scrim, and a scrim over a gradient is mud.
 * The mark would vanish into it — white-on-gradient IS the icon, so a gradient
 * page leaves the animated mark nothing to be. And a full-bleed saturated
 * gradient reads as consumer technology in a hurry, which is the opposite of a
 * few people keeping a circle going.
 *
 * So the page takes the logo's HUES and gives the logo's SATURATION back to the
 * mark. Every surface colour below is the logo's own violet-indigo family
 * pushed to the ends of its range — near-white at one end, near-black at the
 * other — and the only place full-strength colour appears is the line itself.
 *
 * THE ARC
 *
 * The page used to descend warm paper, evening plum, quiet dawn, over three
 * sections. Andy narrowed it to two on 2026-08-14 — a hero and a way to reach a
 * human — so a three-part passage no longer has anywhere to happen. It is now
 * two states with one long transition between them, and they are the two ways
 * Kinpath already presents itself: the wordmark's ink-on-white at the top, the
 * icon's white-on-deep-violet at the foot. The reader descends from one to the
 * other, and the mark changes with the ground under it.
 *
 * Two principles, both from the original brief and both still binding:
 *
 *   1. The page is complete before any script runs. The descent is delivered by
 *      this stylesheet alone; the canvas paints the mark and nothing else.
 *      Delete the canvas and this page still reads as intended.
 *   2. Stillness is the register. Long measures, generous rests, one accent
 *      colour used sparingly, and no motion that asks to be watched.
 */

.home {
  /* Surfaces: the logo's violet-indigo, at the pale and deep ends of itself. */
  --paper: #f8f7fd;
  --paper-deep: #eeeaf8;
  --dusk: #4b3777;
  --night: #191036;

  /* Ink. 15.2:1 on paper, 12.1:1 for the light text on night — both measured.
   *
   * The quiet ink is DARKER than a quiet ink usually wants to be, deliberately.
   * It is the colour of the hero's closing note, which is the last block before
   * the page turns to evening and therefore the one block a page-length descent
   * can catch. Photographing the page with its text hidden and scoring each
   * block against the ground actually under it put that note at 4.07:1 on a
   * desktop and 2.94:1 on a phone against a floor of 4.5 — the only failure on
   * the page, at both sizes. The stops below were retuned to fix it; this colour
   * is what gives it room to spare at a window size nobody measured. It reads as
   * quiet through its size and its rule rather than through being pale, which
   * is the more robust way to be quiet anyway. */
  --ink: #221c3c;
  --muted: #443c5a;
  --night-ink: #efeafd;
  --night-muted: #c9bce8;

  /* The accent is the logo's violet taken down until it is readable: 7.7:1 on
   * paper, and white on it is 8.2:1, so the same colour serves a link, an
   * eyebrow and a filled button without a second variant for contrast. */
  --accent: #7a2fb0;
  --accent-deep: #63258f;

  --rule: rgba(34, 28, 60, 0.16);
  --rule-night: rgba(233, 224, 255, 0.28);
  --measure: 34rem;

  color: var(--ink);
  position: relative;
  min-height: 100vh;

  /* THE DESCENT.
   *
   * Percentages of the document, not of the viewport, so evening arrives across
   * the page rather than inside one screen of it, and broad rather than narrow
   * because a short band reads as a line ruled between two colours.
   *
   * The stops differ between a phone and a wide screen, and that is not fussing.
   * These two layouts put their words in genuinely different places: the hero's
   * last paragraph ends 48% down a desktop page and 57% down a phone one, while
   * "Get in touch" arrives at 62% and 66%. One set of stops that keeps the
   * first on paper and the second on evening at BOTH sizes would have to turn
   * in the five percent where those windows overlap — which is 80 pixels, and
   * looks like a ruled line. Two sets have a comfortable run each.
   *
   * Measured off the real rendered document at 1440x900 and 390x844, not
   * estimated. A translucent veil over the hero was tried first as insurance
   * for the sizes in between, and removed: held to the content column it drew a
   * lit rectangle with two visible edges, and run full-bleed it drew a hard
   * horizontal line across the page where the hero ended. A visible seam is a
   * worse defect than the one it was insuring against, and the quiet ink above
   * carries that insurance instead, at no visual cost at all. */
  /* Flat. The gradient descent this page used to run existed to carry the
   * animated mark down onto deep violet; with the mark gone and the page
   * required to fit one screen, a descent is a promise of scrolling that is
   * no longer kept. Andy's direction, 2026-09-13.
   *
   * 100svh, not 100vh: on a phone the large-viewport unit is taller than the
   * visible area while the browser chrome is showing, which is exactly the
   * overflow this layout exists to avoid.
   */
  background: var(--paper);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* The document element's own background is what shows through an overscroll
 * bounce and behind a body shorter than the viewport. policy.css paints it warm
 * for the policy routes; this page is cool, and a warm sliver above a cool page
 * is exactly the kind of thing nobody can name and everybody notices. Matched
 * by content rather than by an unscoped rule, so this file still cannot change
 * a page it was not loaded for. */
html:has(> body.home) {
  background: #f8f7fd;
}

/* ---------------------------------------------------------------- scaffolding */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--accent-deep);
  padding: 0.9rem 1.2rem;
  z-index: 20;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Nothing overlaps the mark now that it has its own place in the flow, so the
 * stacking context the fixed backdrop needed is gone with it. */

/* -------------------------------------------------------------------- header */

.home-header {
  background: transparent;
  border-bottom: none;
  padding-top: 0;
  flex: 0 0 auto;
}

.home-header .header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
  /* 18px above the wordmark, nothing below it — Andy's tuner reading. */
  padding: 18px 1.5rem 0;
}

.home-header .brand {
  /* The wordmark lockup, not the word. 44pt minimum is met by padding around a
   * 32px image rather than by scaling the mark up past its drawn weight. */
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 0;
  min-height: 44px;
  text-decoration: none;
}

.home-header .brand img {
  display: block;
  height: 36px;
  width: auto;
}

.home-header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-header nav a {
  display: inline-block;
  /* 44pt in BOTH directions. Short words like "Help" fail the width half of
   * the rule long before the height half, which is why min-width is here. */
  min-height: 44px;
  min-width: 44px;
  text-align: center;
  padding: 0.75rem 0;
  line-height: 1.6;
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 240ms ease, border-color 240ms ease;
}

.home-header nav a:hover,
.home-header nav a:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------------- hero */

.home-main {
  margin: 0;
  padding: 0;
  /* Takes whatever height is left, so the footer lands at the bottom of the
   * screen on a tall window without being fixed to it on a short one. */
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}

.home .hero {
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
  padding: clamp(1rem, 4vh, 3rem) 1.5rem clamp(1rem, 4vh, 3rem);
}

.home .eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 clamp(0.55rem, 2.6vh, 1.5rem);
}

.home h1 {
  font-family: Literata, Georgia, serif;
  /* Editorial scale: big, but tied to the viewport so it never crowds a phone. */
  font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 1.75rem;
  max-width: 18ch;
  text-wrap: balance;
}

/* The one sentence the hero carries. Marked up as the h1 so the page still has
 * exactly one heading and `aria-labelledby` still resolves, but set at reading
 * size rather than the display scale — a whole sentence at 5rem is a wall. */
.home h1.hero-line {
  font-family: Literata, Georgia, serif;
  /* Width AND height. A page required to fit one screen cannot size its
   * heading on width alone: at 1024x500 the width-only clamp overflowed by
   * 178px, because a short laptop window is as wide as a tall one. The vh
   * ceiling is what gives way on a short screen. */
  font-size: min(clamp(2.1rem, 1.25rem + 3.4vw, 3.9rem), 8.6vh);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.018em;
  max-width: 22ch;
  margin: 0 0 clamp(0.85rem, 4vh, 2.25rem);
  text-wrap: balance;
}

/* The turn gets its own line, always. Andy's call, and the better one for this
 * sentence: the reader finishes the claim, pauses, and meets the contrast on a
 * line of its own. A leading em-dash reads as an accident in running text,
 * which is where that rule comes from — in a headline whose break is controlled
 * it reads as deliberate, and the beat is the whole point.
 *
 * FORCED, not left to the measure. Unforced it lands mid-line at some widths
 * and alone at others, which is the one way it would look like a mistake. */
.home h1.hero-line .turn {
  display: block;
}

.home .lede {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.62;
  color: var(--ink);
  max-width: var(--measure);
  margin: 0 0 2.5rem;
  text-wrap: pretty;
}

.home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  margin: 0 0 2.5rem;
}

.home .hero-note {
  font-size: clamp(0.94rem, 1.8vh, 1.05rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 34rem;
  margin: 0 0 clamp(0.9rem, 3.6vh, 2.25rem);
}

/* ------------------------------------------------------------------- buttons */

.home .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: background-color 220ms ease, border-color 220ms ease;
}

.home .button:hover,
.home .button:focus-visible {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.home .button-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
  font-weight: 600;
}

.home .button-quiet:hover,
.home .button-quiet:focus-visible {
  background: rgba(34, 28, 60, 0.05);
  border-color: rgba(34, 28, 60, 0.34);
  color: var(--ink);
}

.home .button-large {
  /* Quieter, 2026-09-13. It was serif at up to 1.6rem and 700 weight, which
   * made the address compete with the heading above it. The invitation should
   * be findable, not loud. */
  font-family: inherit;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 0.72rem 1.5rem;
}

/* A short window is the case a one-screen page fails first, and it fails for a
 * reason that is not obvious: the heading is held to a 19-character measure so
 * it breaks three ways, and three lines of display type is most of a 500px
 * window. On a short screen the measure opens up instead, so the same words
 * take two lines, and the paddings give up what is left. Measured across
 * thirteen viewport sizes rather than guessed at. */
@media (max-height: 760px) {
  .home h1.hero-line {
    max-width: 34ch;
  }

  .home .hero {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .home-header .header-inner {
    padding-top: 10px;
  }

  .home-footer {
    padding-bottom: 0.35rem;
  }
}

/* Shorter still — a half-height desktop window, or a 2016 phone. The heading
 * ceiling drops again and the paddings go to almost nothing. Below roughly
 * 420px of height the page does scroll a little, and that is left alone: at
 * that size something has to give, and a few pixels of scroll is a better
 * answer than type nobody can read. */
@media (max-height: 620px) {
  .home h1.hero-line {
    font-size: min(clamp(1.7rem, 1rem + 2.6vw, 3.9rem), 7.4vh);
  }

  .home .hero {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }

  .home .hero-note {
    line-height: 1.5;
  }

  .home-header .header-inner {
    padding-top: 6px;
  }

  .home-footer {
    padding-bottom: 0.15rem;
  }
}

/* ----------------------------------------------------------------- passages */

.home .passage {
  padding: clamp(4rem, 12vh, 8rem) 1.5rem;
}

.home .passage > * {
  max-width: 72rem;
  margin-inline: auto;
}

.home .passage h2 {
  font-family: Literata, Georgia, serif;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(2rem, 5vh, 3.5rem);
}

/* --------------------------------------------- the close: the page at evening */

/* No background of its own. The descent belongs to the document, and a section
 * that painted its own would be an opaque lid over the mark exactly where the
 * mark is at its best — near-white on deep violet, which is the icon. */
.home .passage-close {
  color: var(--night-ink);
  /* Aligned to the hero's column, not centred on the page. Andy's direction,
   * 2026-09-13: the closing block reads as a continuation of the opening one. */
  text-align: left;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.home .passage-close .close-actions,
.home .passage-close .close-note {
  margin-inline: 0;
}

/* The text-message line, demoted out of the hero but still reader-visible —
 * sms_publication_check.py requires it on this route for carrier review. */
.home .sms-footnote {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(3rem, 8vh, 5rem);
  font-size: 0.86rem;
  line-height: 1.6;
  /* It sits on the dark close band, not on the page. Ink here is invisible —
   * the first version of this rule used var(--muted) and could not be read. */
  color: rgb(196 186 224);
}

.home .sms-footnote a {
  color: rgb(226 216 252);
}

.home .sms-footnote strong {
  color: rgb(239 234 253);
}

.home .passage-close h2 {
  color: var(--night-ink);
}

.home .close-actions {
  margin: 0 0 2.5rem;
}

.home .passage-close .button-large {
  background: #f4f0ff;
  color: #2a1350;
  border-color: #f4f0ff;
  /* An email address is long; let it wrap rather than overflow a phone. */
  word-break: break-word;
}

.home .passage-close .button-large:hover,
.home .passage-close .button-large:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #2a1350;
}

.home .close-note {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--night-muted);
  line-height: 1.68;
}

/* -------------------------------------------------------------------- footer */

/* Subdued links and nothing else. This footer used to close a gradient descent
 * onto deep violet and carried light-on-dark colours for it; the page is flat
 * and one screen tall now, so it is quiet type on paper. */
.home-footer {
  max-width: none;
  border-top: none;
  background: transparent;
  color: var(--muted);
  padding: 0 1.5rem clamp(0.75rem, 2.5vh, 1.5rem);
  display: grid;
  justify-items: center;
  text-align: center;
  flex: 0 0 auto;
}

.home-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  /* No gap. The spacing IS the separator now. */
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The middot, in the signature's own idiom — "Kinpath · Seattle". It sits
 * between the items rather than inside them, so the rhythm is set once here
 * and cannot drift with the length of a word. */
.home-footer nav li + li::before {
  content: "·";
  margin: 0 0.4rem;
  color: var(--muted);
  opacity: 0.55;
}

/* WHY THE TAP TARGET IS A PSEUDO-ELEMENT AND NOT min-width.
 *
 * These links carried `min-width: 44px` for the 44pt touch rule, and it was
 * the cause of the uneven spacing Andy spotted: it pads the BOX, so a short
 * word is centred inside slack that a long one does not have. Measured on
 * 2026-09-13 — "Help" gained 7px on each side, "Terms" 3px, "Consent" and
 * "Privacy" none, so the gaps between the four were all different and the
 * Consent-to-Privacy one read tightest.
 *
 * The overlay below keeps a full 44x44 hit area and takes no space in the
 * layout, so the rule is honoured and the type sets evenly. */
.home-footer nav a {
  position: relative;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  text-decoration: none;
}

.home-footer nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  width: 100%;
  height: 44px;
}

.home-footer nav a:hover,
.home-footer nav a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* ------------------------------------------------------------- accommodations */

@media (prefers-reduced-motion: reduce) {
  .home *,
  .home *::before,
  .home *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

}

@media (prefers-contrast: more) {
  .home .close-note {
    color: #fff;
  }

  .home .hero-note {
    color: var(--ink);
  }
}

@media print {
}