/* home.css -- Components that exist only on the home page and are deliberately not reused.
 *
 * Part 9 of 9. These files were one style.css and are still one
 * stylesheet: equal-specificity rules resolve by document order, so the
 * <link> tags in every page must stay in this order and nothing may move
 * between files without checking what it lands after.
 *   tokens.css -> layout.css -> type.css -> prose.css -> charts.css -> sources.css -> paper.css -> interactive.css -> home.css
 *
 * See site/README.md for the rules that govern all of them. */

/* --- The home page -------------------------------------------------------- */

/* Four components, all of which exist only here. The home page is the one page
 * on this site with no chart and no continuous argument: it states the size of
 * the study, three findings, what the study does not establish, and where to
 * go. Everything below serves that and is deliberately not reused elsewhere --
 * a "card" that appears on one page is a layout, and a card that appears on
 * four becomes a design system nobody asked for. */

/* The same two accents the argument uses, and for the same reason: green is the
 * site, the clay means "this is what the study does not establish". The blue and
 * the violet that used to open this page bought a change of colour per section
 * and cost the clay its meaning -- one warning hue among four decorative ones is
 * not a warning. */
#honest { --accent: var(--accent-red); }

/* The one figure the page leads on. A hero number rather than a chart: a single
 * quantity with nothing to compare it against has no shape to plot, and a bar
 * of one bar is a number wearing a costume.
 *
 * Left, not centred. Everything else on this site sits against one left edge --
 * every heading, every paragraph, every figure and every caption -- and this was
 * the single object that stepped out of that column to be admired in the middle
 * of it. A centred block with a giant number in it is the shape of a landing
 * page, and the arrangement it interrupted is the shape of a document. */
.bignum {
  margin: var(--space-5) 0;
}

.bignum__lead,
.bignum__unit {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--size-3);
}

/* The top of the scale, which is where the page's title is -- and on this page
 * that is the right size for this number, because the h1 above it ("there is a
 * city under your field") and this figure are the same claim said twice. It used
 * to run to 5.5rem, near 99px: two and a half times the headline, which made the
 * headline the caption of the number rather than the other way round. */
.bignum__value {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--size-6);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* The highlighter wash under a data slot is sized for a number inside a
 * sentence. At display size it becomes a band across the figure, so the slot
 * keeps its weight and loses the marking -- the size is doing that job here. */
.bignum__value b[data-stat] {
  background-image: none;
  font-weight: 600;
}

/* The `.tiles` strip that stood here -- four bordered cells, each a large figure
 * over a small grey label, holding the plant count, the marker count, the read
 * depth and "one pasture, sampled once" -- is gone, and the four facts are a
 * sentence in index.html instead.
 *
 * The argument for it was that burying the size of the study in prose is how
 * thirteen cores get read as a hundred. That argument was right about the danger
 * and wrong about the remedy: the strip is the stock statistics component of
 * every generated landing page, and dressing a small honest study in it made the
 * study look inflated rather than the numbers look plain. A sentence naming all
 * four in a row is harder to skim past than four boxes, not easier. */

/* Three findings, each a heading and a paragraph. Not a list: each one is a
 * claim with its own evidence, and list markers would imply an order of
 * importance the page does not intend. */
.finding + .finding { margin-top: var(--space-5); }

.finding h3 {
  font: 600 var(--size-3)/var(--lh-snug) var(--font-display);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.finding h3::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-round);
  background: var(--accent);
  margin-right: var(--space-2);
  vertical-align: 0.08em;
}

/* What the study does not establish, at the same weight as what it does. The
 * left rule is the section's accent, which here is the red already used for the
 * limits section of the argument -- so the two pages agree on what colour a
 * caveat is. */
.ledger {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.ledger li {
  position: relative;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  margin: 0 0 var(--space-4);
}

/* The rule is a child rather than a border so it can be drawn.
 *
 * Each one rules a claim out, and it draws downward as the claim is reached --
 * the same gesture as the accent tab at the head of a section, pointed at the
 * part of this site that matters most. It is a picture of nothing: no length
 * here encodes a quantity, which is what licenses it to start collapsed at all.
 *
 * Drawn by the scroll position rather than by a script. Without support the
 * animation never attaches and every rule stands at full height, which is
 * exactly what it looked like before this existed. */
.ledger li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--accent) 55%, var(--tint-base));
  transform-origin: top center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ledger li::before {
      animation: rule-down linear both;
      animation-timeline: view();
      /* Finished well before the item reaches the middle of the window: the
       * rule should be complete by the time the sentence beside it is being
       * read, not still creeping down past it. */
      animation-range: entry 15% cover 35%;
    }
  }
}
@keyframes rule-down {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.ledger li:last-child { margin-bottom: 0; }

.ledger strong { font-weight: 600; }

/* Three doors. Whole-card links rather than a heading with a "read more" under
 * it: the target is the size of the card, which is the difference between a
 * link that can be hit on a phone and one that has to be aimed at. */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.door {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4) var(--space-4);
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.door:hover,
.door:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  transform: translateY(-2px);
  /* Fallback spelled out: the token is newer than this rule, and a
   * box-shadow that resolves to nothing is a card that stops responding
   * to the pointer for no visible reason. */
  box-shadow: var(--shadow-soft, 0 4px 16px rgb(0 0 0 / 0.10));
}

.door h3 {
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.door h3::after {
  content: " \2192";
  /* The arrow is decoration on a link that is already a link. Hidden from
   * assistive technology, which announces the destination from the href. */
  speak: never;
}

.door p {
  margin: 0;
  font-size: var(--size-2);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .door { transition: border-color 0.15s ease; }
  .door:hover, .door:focus-visible { transform: none; }
}