/* ============================================================
   337 Farms — the flock page, on The Record
   ------------------------------------------------------------
   If the site is a page of the farm's book, this is the page
   with the figures on it: birds, eggs a day, pounds of feed,
   first light, shut-in, and a fortnight of mornings against the
   temperature they happened in. Nothing here is written by a
   designer; it is read off the log and printed.

   Which makes the two rules from styles.css load-bearing rather
   than decorative:

     FIGURES IN THE SERIF, WORDS IN THE SANS. Every count, time,
     temperature and percentage below is --font-display, because
     Newsreader's digits are one width and a column of them
     lines up on its own. Every label and sentence around them
     is --font-body. Franklin ships no `tnum`, so
     font-variant-numeric only ever appears here on display.

     THE UNIT IS SEVEN. Every gap, pad and margin below is --s1
     … --s9, so a row edge lands on a text baseline.

   And one rule this page has to obey harder than the others:
   IT STARTS BLANK. Every figure is a "·" until the API answers
   and whole sections are [hidden] until there is something
   honest to put in them, so nothing here may depend on content
   for its shape.

   This file is a layer on top of styles.css — no reset, no body
   rules, no chrome, no tokens of its own.
   ============================================================ */


/* ── The band: four figures under the masthead ───────────────
   Ruled top and bottom, which is the whole component: a row in
   a ledger, not four cards. The rule on top is the one .section
   already draws, so the band starts flush against it rather
   than printing a second hairline 28px under the first. */
.flock-now { padding-top: 0; padding-bottom: var(--s4); }
@media (min-width: 768px) { .flock-now { padding-bottom: var(--s5); } }

.fl-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4) var(--s3);
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) 0;
}
@media (min-width: 768px) { .fl-band { padding: var(--s5) 0; } }


/* ── A stat tile ──
   Value then label, the value at hero weight in the page's own sans, the
   label in the tracked micro-caps the rest of the site uses for its small
   voice. Figures are tabular because these sit in a row and a number that
   shifts width as it counts up reads as broken.
   The twin lives in styles.css as .nv / .nk on the eggs page; they are the
   same object and the specs are kept identical on purpose. */
.fl-stat { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.fl-stat b {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fl-stat span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
}

/* The one number on the page that arrives inside a sentence, so
   it is set in the sentence's face. */
.fl-asof {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: var(--s2) 0 0;
}


/* ── One rhythm for every section below ────────────────────── */
.fl-section, .fl-sun { padding-top: var(--s5); padding-bottom: var(--s5); }
@media (min-width: 768px) {
  .fl-section, .fl-sun { padding-top: var(--s7); padding-bottom: var(--s7); }
}
.fl-section .section-lead { margin-bottom: var(--s4); }
@media (min-width: 768px) { .fl-section .section-lead { margin-bottom: var(--s5); } }

/* Prose. 17px on a 28px line is four sevens, so a paragraph
   ends on the grid it started on. */
.fl-body {
  font-size: 1.0625rem;
  line-height: 1.647;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0;
}

.fl-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s6);
  align-items: start;
}
/* A line separates them, the way a printed page always has. */
.fl-col { border-top: 1px solid var(--rule); padding-top: var(--s3); }
@media (max-width: 760px) { .fl-cols { grid-template-columns: 1fr; } }


/* ── How much of the flock is laying ─────────────────────────
   Against the mark a healthy flock hits. The mark is the point:
   a bar on its own is a number with no opinion. */
.fl-meter {
  position: relative;
  height: var(--s2);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: visible;
}
.fl-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--indigo-text);
  transition: width 260ms var(--ease);
}
.fl-meter-fill.is-above { background: var(--indigo); }
/* A quiet week is not an alarm. This used to go rust-red, which
   read as something being wrong with the birds when the honest
   answer is that hens lay less in the heat and less in the
   dark. So: warm, and the only warm text-weight colour that can
   be read on paper. */
.fl-meter-fill.is-below { background: var(--yolk-deep); }
/* A tick 28px tall — two lines of the grid, and inside the 36px
   a rule is allowed to be. */
.fl-meter-mark {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 2px;
  background: var(--ink);
  border-radius: 0;
}
.fl-meter-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: var(--s3) 0 0;
}
.fl-meter-note b {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* What the heat is doing to the laying. An inset well, square,
   because the sunk tone is the only lift this system has. */
.fl-heat {
  font-size: 1.0625rem;
  line-height: 1.647;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  padding: var(--s3);
  background: var(--paper-sunk);
  border-radius: 0;
}
.fl-heat b {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}


/* ── The sun over the farm ───────────────────────────────────
   The showpiece, and the only thing on the page that is true at
   the moment you look at it rather than true this week. It used
   to sit in a rounded gold panel with a 32px radius. It sits on
   the paper now, under the section's own rule, and the drawing
   is the only warm thing left in it. */
.fl-sun-wrap { padding: var(--s2) 0 var(--s3); }
/* The arc's own colours are set by flock.js, which writes the
   tokens into a style attribute on each mark — an SVG
   presentation attribute cannot resolve var(), a style property
   can, and an inline style outranks this file anyway. So what
   is left here is what CSS alone decides: where it sits, and
   how it arrives. */
.fl-sun-arc svg { display: block; }

.fl-sun-feet {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s2);
  margin-top: var(--s1);
}
.fl-sun-feet span { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.fl-sun-feet b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fl-sun-feet i {
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.fl-sun-mid { text-align: center; align-items: center; }
.fl-sun-feet span:last-child { text-align: right; align-items: flex-end; }
/* The hours on grass are the claim this section exists to make,
   so they get the one warm ink on the page. */
.fl-sun-mid b { color: var(--yolk-deep); }

.fl-daytrend {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: var(--s3) 0 0;
}
.fl-daytrend b {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}


/* ── A fortnight of mornings ─────────────────────────────────
   Bars for what was collected, the temperature over the top.
   Their paint comes from flock.js in the same way the sun's
   does — a fill and a rule are the two things warmth is still
   allowed to be, and neither of them is text. What is set here
   is the frame: the face the figures are cut in, the focus
   ring, and the dimming that picking a morning causes. */
.fl-chart { margin: 0 0 var(--s2); }
.fl-chart svg { display: block; overflow: visible; border-radius: 0; outline: none; }
/* The chart takes focus so arrow keys work, which means it also
   draws the browser's focus ring — fine for a keyboard, wrong
   for a mouse click. */
.fl-chart svg:focus-visible {
  outline: 2px solid var(--indigo-soft);
  outline-offset: 3px;
}

.fl-chart .fl-bar { transition: fill-opacity 160ms var(--ease); }
/* Two dates and a scale caption. They are figures, so they are
   cut in the serif like every other figure on the page, and at
   13px rather than the 12 the markup asks for. */
.fl-chart text {
  font-family: var(--font-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.fl-chart .fl-hit { cursor: pointer; }
/* The rest of the fortnight steps back only once you have
   actually picked a morning. Dimming on plain hover makes the
   chart flinch when the cursor merely crosses it. */
.fl-chart svg.is-picking .fl-bar { fill-opacity: 0.3; }
.fl-chart svg.is-picking .fl-bar.is-picked { fill-opacity: 1; }

/* What that morning was, once you have pointed at one. */
.fl-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  margin: 0 0 var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--paper-sunk);
  border-radius: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.fl-pick b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.fl-chart-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin: 0;
}
.fl-chart-key span::before {
  content: '';
  display: inline-block;
  margin-right: var(--s1);
  vertical-align: middle;
}
/* One series needs no legend: the heading says what is plotted, and a box
   with a single swatch in it only restates the heading. What is left to
   name is the mark for a hot morning. */
.ck-hot::before {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
}


/* ── Today, as three figures ───────────────────────────────
   These were ring dials. A ring encodes a part of a whole, and a
   temperature has no whole, so the arc was showing a fraction of
   a range this file had invented. They are figures now, in the
   same tile the rest of the site uses for a number, so nothing is
   squeezed inside a circle and nothing is cut off by one.
   Same specs as .fl-stat above and .nv / .nk in styles.css. */
/* Three across at every width. They are one reading of one moment and
   wrapping the third onto its own row makes it look like a different fact. */
.fl-wx {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  max-width: 34rem;
  margin: 0 0 var(--s6);
}
.fl-read { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.fl-read b {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fl-read span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
}

/* A dot a day for the fortnight, filled when the farm counts it
   hot. Reads in one glance, which the high/low band it replaced
   never did. */
.fl-wx-band { margin: 0 0 var(--s4); }
.fl-pips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s3); }
.fl-pip {
  width: var(--s2);
  height: var(--s2);
  border-radius: 50%;
  background: var(--paper-sunk);
  flex: 0 0 auto;
}
.fl-pip.is-hot { background: var(--yolk-deep); }
/* No reading that day. An outline, not a shadow. */
.fl-pip.is-none { background: none; border: 1px solid var(--rule); }
.fl-pips-say {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.fl-pips-say b {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}


/* ── What is coming ──────────────────────────────────────────
   A date in the future is the most inviting thing a farm page
   can have on it, and it used to sit in a tinted panel to say
   so. The section's own rule and a heading do it instead: one
   rule per boundary, and never a second one 28px under the
   first. */
.fl-next h2 {
  font-weight: 600;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  margin: var(--s1) 0 var(--s3);
}
.fl-next-body {
  color: var(--ink-2);
  line-height: 1.647;
  max-width: var(--measure);
  margin: 0 0 var(--s3);
}
.fl-next-bar {
  height: var(--s2);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
}
.fl-next-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--indigo);
  transition: width 260ms var(--ease);
}


/* ── Nothing written down yet ────────────────────────────────
   Shown instead of everything above when the log is empty. A
   page of dashes is worse than a page that says so. */
.coming-soon { max-width: var(--measure); }
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.coming-soon h2 {
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: var(--s3) 0;
}
.coming-soon p {
  font-size: 1.0625rem;
  line-height: 1.647;
  color: var(--ink-2);
  margin: 0;
}


/* ── Things that draw themselves ─────────────────────────────
   Each visual sits at rest until it is scrolled to, then goes.
   All transitions rather than keyframes: a transition can be
   handed a final value once and left alone, and it costs
   nothing when the reader has asked not to be moved about.

   Two things changed with the redesign. The durations came down
   to the 160–260ms the system allows — a mark that takes a
   second and a half to arrive is an animation about itself. And
   the entrances no longer stagger: flock.js writes a per-index
   transition-delay into the style attribute of every bar, pip
   and dial, and choreography is exactly what this page is not
   for, so it is overruled here rather than performed. */
.fl-chart .fl-grow {
  transform: scaleY(0);
  transition: transform 260ms var(--ease);
  transition-delay: 0s !important;
}
.fl-chart svg.is-drawn .fl-grow { transform: scaleY(1); }

/* The temperature line draws on behind them. */
.fl-chart .fl-draw { transition: stroke-dashoffset 260ms var(--ease); }
.fl-chart svg.is-drawn .fl-draw { stroke-dashoffset: 0; }

/* The sun's track dots itself in — on sevens, naturally — then
   the sun turns up on it. No bounce, and nothing scales. */
.fl-sun-arc .fl-track {
  stroke-dasharray: 1 7;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.fl-sun-arc svg.is-drawn .fl-track { opacity: 1; }
.fl-sun-arc .fl-sunmark {
  opacity: 0;
  transition: opacity 260ms var(--ease) 160ms;
}
.fl-sun-arc svg.is-drawn .fl-sunmark { opacity: 1; }

/* Pips land. */
.fl-pips .fl-pip {
  opacity: 0;
  transition: opacity 200ms var(--ease);
  transition-delay: 0s !important;
}
.fl-pips.is-drawn .fl-pip { opacity: 1; }

/* Nothing above moves for anybody who has asked the page to
   hold still. */
@media (prefers-reduced-motion: reduce) {
  .fl-chart .fl-grow, .fl-chart svg.is-drawn .fl-grow { transform: none; transition: none; }
  .fl-chart .fl-draw { stroke-dasharray: none; transition: none; }
  .fl-sun-arc .fl-track, .fl-sun-arc .fl-sunmark { opacity: 1; transition: none; }
  .fl-pips .fl-pip { opacity: 1; transition: none; }
  .fl-meter-fill, .fl-next-bar span { transition: none; }
}

/* ── Today in Kaplan, centred ───────────────────────────────
   One reading, not a column of prose, so it sits on the page's
   centre line like the footer under it rather than hugging the
   left edge of a wide screen. */
#flWeatherSection { text-align: center; }
#flWeatherSection .section-lead,
#flWeatherSection .fl-body { margin-left: auto; margin-right: auto; }
#flWeatherSection .fl-wx { margin-left: auto; margin-right: auto; }
#flWeatherSection .fl-read { align-items: center; }
#flWeatherSection .fl-pips { justify-content: center; }