/* 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 color per section
 * and cost the clay its meaning -- one warning hue among four decorative ones is
 * not a warning. */
/* The front page's limits section moved to research.html#limits (2026-08-18);
 * that page's own rules color it. */

/* 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 centerd. 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 centerd 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 gray 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);
  /* Headings elsewhere balance their lines; here that broke a two-line
   * heading early and left the first line short. Fill the line instead, and
   * hang the wrap under the text rather than under the dot. */
  text-wrap: pretty;
  padding-left: calc(0.5rem + var(--space-2));
  text-indent: calc(-1 * (0.5rem + 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 color 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; }
}

/* --- The lab-site front door (2026-08) ------------------------------------ */

/* The home page was rebuilt to read like a small research-group site: an
 * overview masthead, a photograph beside a short description of the author,
 * the short version of the farm result, and a grid of doors to every other
 * page. Three of those blocks want to be wider than the prose column, so
 * this page and only this page carries a second track. It is scoped to
 * .page-home; the note beside --measure in tokens.css about there being no
 * wider figure track still holds for every argument page. */
.page-home {
  --measure-wide: min(72rem, 92vw);
}

/* Break a block out of the centerd prose column to the wide track. Works
 * because main/header are centerd with auto margins: half the difference
 * between the two widths, taken from each side. */
.page-home .wide {
  width: var(--measure-wide);
  max-width: none;
  margin-left: calc(50% - var(--measure-wide) / 2);
  margin-right: calc(50% - var(--measure-wide) / 2);
}

/* The masthead: the site's name at display size and one line beneath it. */
.masthead {
  padding-bottom: var(--space-4);
}

.masthead h1 {
  font-size: var(--size-6);
  margin-bottom: var(--space-2);
}

.masthead__sub {
  margin: 0;
  font-size: var(--size-4);
  color: var(--text-secondary);
  max-width: 46rem;
}

/* Profile (about.html): photograph on the left half, a short description on
 * the right, inside the same prose column as everything else. On narrow
 * screens the two stack, photo first. Kept in this file because it began on
 * the home page and every page loads all nine sheets regardless. */
.profile {
  display: grid;
  /* The portrait is taller than it is wide, so it takes the narrower share of
   * the row and the text the wider; the two then finish at about the same
   * height. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-5);
  align-items: start;
  /* No extra margin: the standard section padding is the whole gap, so the
   * bio runs on into the project the way one section follows another. */
  padding-bottom: var(--space-5);
}

.profile__photo { margin: 0; }

/* Until a photograph exists: a dashed box at the proportions the photograph
 * will take, so the layout reads correctly before it is in. Used by the
 * profile on about.html and the photo strip on the home page. Delete this
 * rule when the last <picture> goes in. */
.img-placeholder {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 2px dashed var(--border);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--size-3);
  background: var(--surface);
}

.profile__text .lede { margin-top: 0; }

.profile__links {
  font-size: var(--size-2);
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .profile { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* A row of photographs across the prose column, three abreast; two on a
 * tablet, one on a phone. Each is a standard .photo so the frame, shadow and
 * caption match every other photograph on the site. */
.photo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
}

.photo-row .photo { margin: 0; }

/* Rounded corners on the photo row and the profile photograph. The rest of the
 * site keeps --radius (0): these are pictures set beside each other rather
 * than figures in a column of text, and the softer edge reads as a gallery.
 * The frame already clips its contents, so rounding the frame rounds the
 * picture; the shadow follows the same shape. */
.photo-row .photo__frame,
.profile .photo__frame,
.profile .img-placeholder {
  border-radius: 0.75rem;
}

/* Eight doors instead of three: two across in the prose column, one on a
 * phone. */
.doors--all {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* The findings end and the doors begin: one gap, not the section padding
 * stacked on both sides of the boundary. The last finding is the end of the
 * argument, and the doors are the way out of it, so they sit close. */
#read {
  margin-bottom: var(--space-6);
  padding-top: var(--space-4);
}
.page-home #found { padding-bottom: var(--space-3); }


/* --- The photographic backdrop, the card surfaces, and a tighter top -------- */

/* A grayscale photograph of the farm gate behind the whole page, at an opacity
 * low enough that it reads as a faint print in the paper rather than a
 * picture. Fixed, so it does not scroll with the text and the eye never tracks
 * it. On every page. Desaturated in the file
 * (media/backdrop-1600) so there is no filter running on a full-window layer. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../media/backdrop-1600.webp") center / cover no-repeat;
  opacity: var(--backdrop-opacity);
  pointer-events: none;
}

/* The doors get a surface of their own and a green top edge, so the grid reads
 * as a set of cards rather than a table of links drawn on the paper. */
.doors--all .door {
  background: var(--surface-raised);
  border-top: 3px solid var(--accent);
  border-radius: 0.5rem;
}

/* Less air between the masthead, the photographs and the first findings: the
 * top of this page is a sequence, not three separate sections. */
.page-home .masthead { padding-bottom: var(--space-3); }
.page-home #photos { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.page-home #found { padding-top: var(--space-4); }

/* Get the findings above the fold. The masthead loses its top air, the lede
 * drops to body size (it runs to several lines), the photographs run as a
 * shorter 16:9 strip with one-line captions, and the findings section starts
 * closer behind them. */
.page-home .hero { padding-top: var(--space-5); }
.page-home .masthead .lede { font-size: var(--size-2); }
.page-home .masthead h1 { margin-bottom: var(--space-2); }
.photo-row figcaption { font-size: var(--size-1); margin-top: var(--space-2); }
.page-home #photos { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.page-home #found { padding-top: var(--space-3); }
.page-home #found > .lede { font-size: var(--size-3); }

/* Smaller page title, and the results heading underlined in the accent so it
 * reads as the section the page is for. */
/* The results heading is underlined in the accent, and "Results" also carries
 * the highlighter stroke the numbers wear, a little taller. */
.page-home #found > h2 {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
}
.page-home #found > h2 mark {
  color: inherit;
  /* A plain highlight over the whole word, in a wash of the accent. */
  background-color: color-mix(in oklab, var(--accent) calc(32% * var(--tint-strength)), var(--tint-base));
  padding: 0 0.12em;
  margin: 0 -0.12em;
}
.doors--all a[href="about.html"] h3 { text-decoration: underline; text-underline-offset: 0.15em; }

/* Underlined phrases in the lede: the site's green, set a little below the
 * baseline so it does not cut through descenders. */
.page-home .lede u {
  text-decoration: underline;
  /* A wash of the accent rather than the accent itself, and a hairline: it
   * should read as emphasis, not as a link. */
  text-decoration-color: color-mix(in oklab, var(--accent) 45%, var(--tint-base));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* about.html: the name sits close over the portrait row rather than a full
 * section gap above it. */
.hero--tight { padding-bottom: var(--space-2); }
.hero--tight + main #profile { padding-top: var(--space-3); }

/* The field of kinds under the hero number: one dot per kind, the width of
 * the column, filled in as the counter runs. */
.bignum__field {
  display: block;
  margin-top: var(--space-3);
  max-width: 100%;
}
.bignum__note {
  margin: var(--space-1) 0 0;
  font: 500 var(--size-1)/var(--lh-body) var(--font-display);
  color: var(--text-muted);
}

/* The nitrogen-proxy legend carries seven entries -- two groups and five plant
 * shapes -- which at the site's usual legend spacing ran the full width of the
 * column and crowded the right edge. Tighter spacing, and a ceiling on the
 * width so it wraps to a second line rather than running to the margin. */
#chart-nproxies .legend {
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  /* Held to the width the panels use, so the row cannot reach the right edge
   * of the column; it wraps onto a second line instead. */
  max-width: 42rem;
}

/* A rule under the hero number, drawn as the site's own soil profile rather
 * than as a line: the three horizons the brand mark carries -- litter, root
 * zone, mineral subsoil -- laid left to right beneath the count of what lives
 * in them. It sits under the number only, not the width of the column, because
 * it belongs to the figure and not to the page. */
.bignum__value {
  display: inline-block;
  position: relative;
  padding-bottom: 0.06em;
}
.bignum__value::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Just clear of the baseline, where an underline sits, rather than under the
   * whole line box: at this size the descender space is a third of an inch of
   * blank paper and the rule was floating in it. */
  bottom: 0.1em;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in oklab, var(--accent) 70%, var(--accent-red)) 38%,
    var(--accent-red) 68%,
    color-mix(in oklab, var(--accent-red) 55%, var(--text-primary)) 100%);
  /* The rule stops for the comma the way a real underline skips a descender.
   * page.js measures the comma's edges into --cut-l / --cut-r; the mask is
   * opaque everywhere except that stretch. With both at 0 the gap has no width
   * and the rule is unbroken, so a browser that never ran the script -- or a
   * figure without a comma -- gets the plain bar. */
  -webkit-mask-image: linear-gradient(90deg,
    #000 0, #000 var(--cut-l, 0px),
    transparent var(--cut-l, 0px), transparent var(--cut-r, 0px),
    #000 var(--cut-r, 0px));
  mask-image: linear-gradient(90deg,
    #000 0, #000 var(--cut-l, 0px),
    transparent var(--cut-l, 0px), transparent var(--cut-r, 0px),
    #000 var(--cut-r, 0px));
}