/* article.css - the Seed reading page. Generated by
   tools/publish_article_redesign.py. Do not hand edit: the next publish
   overwrites it. Colours come from tokens.css and are never repeated here. */

.crumb { font-size: var(--step-small); color: var(--ink-muted); padding-top: var(--gap-m); }
.crumb a { text-decoration: none; color: var(--ink-muted); }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb span { padding: 0 8px; opacity: .5; }

.article-page { padding-bottom: var(--gap-xxl); }

/* THE HEADER. .article-title and .article-excerpt keep their names because
   article_meta.py rewrites both by regex. */
.article-header { padding-block: var(--gap-l) var(--gap-m); }
.article-category-tag { font-size: var(--step-small); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); margin: 0 0 var(--gap-s); font-weight: var(--w-medium); }
.article-title { font-size: clamp(2.1rem, 4vw, 3.1rem); max-width: 22ch; letter-spacing: var(--track-tighter);
  font-weight: var(--w-light); line-height: 1.08; margin: 0; }
.article-excerpt { max-width: 62ch; margin-top: var(--gap-m); font-size: 1.1875rem;
  line-height: 1.55; color: var(--ink-muted); }
.article-meta { display: flex; gap: var(--gap-m); align-items: center; flex-wrap: wrap;
  margin-top: var(--gap-l); padding-top: var(--gap-m); border-top: 1px solid var(--line);
  font-size: var(--step-small); color: var(--ink-muted); }
.article-meta .who { display: flex; gap: 10px; align-items: center; }
.article-meta .who__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--green-900);
  color: var(--white-000); display: flex; align-items: center; justify-content: center;
  font-size: .6875rem; letter-spacing: .05em; }
.article-meta .who b { color: var(--ink); font-weight: var(--w-normal); font-size: .9375rem; }
.article-meta time, .article-read-time { font-variant-numeric: tabular-nums; }

/* THE HERO. Nothing is laid over it, per nothing-covers-a-picture.md: no
   gradient, no scrim, no opacity, no ::before. */
.article-hero { border-radius: var(--radius-pill); overflow: hidden; aspect-ratio: 21 / 9;
  background: var(--bg-alt); margin-bottom: var(--gap-xl); }
.article-hero img, .article-hero picture { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The empty frame is SHORTER than a real photograph on purpose. At the full
   21:9 it filled half the first screen with nothing, so a guide with no picture
   yet looked worse than one with no frame at all. It still has to be obvious,
   because it is the only way Chris can see where a picture is wanted. */
.article-hero--empty { aspect-ratio: auto; min-height: 150px; display: flex; align-items: center;
  justify-content: center; text-align: center; border: 1px dashed var(--line);
  color: var(--ink-muted); font-size: var(--step-small); padding: var(--gap-l); }

/* TWO COLUMNS: the contents rail, then the reading measure. Sixteen sections in
   1,221 words is the real shape of these guides, and that cannot be read
   without a way to jump. */
.artwrap { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--gap-xl); align-items: start; }
.toc { position: sticky; top: 96px; max-height: calc(100vh - 130px); overflow: auto; }
.toc > summary { list-style: none; cursor: default; }
.toc > summary::-webkit-details-marker { display: none; }
.toc h4 { font-size: var(--step-small); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); margin: 0 0 var(--gap-s); font-weight: var(--w-medium); }
.toc a { display: block; text-decoration: none; font-size: .875rem; color: var(--ink-muted);
  padding: 6px 12px; border-left: 2px solid var(--line); line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-left-color: var(--ink); background: var(--white-200);
  border-radius: 0 var(--radius) var(--radius) 0; }
/* ON A PHONE THE CONTENTS FOLD AWAY. Rendered at 390px, a twelve section list
   filled the entire screen below the photograph, so a reader had to scroll past
   the whole contents to reach the first sentence of the guide. It opens on a
   tap. Above 1000px it is always open and the summary behaves as a heading. */
/* THIS BLOCK MUST STAY AFTER THE BASE .toc RULES. It used to sit BEFORE them,
   so `position: static` was immediately overridden by the `position: sticky`
   that followed, and on a 900px screen the contents box stayed stuck under the
   navigation and drew straight over the first heading. Same specificity means
   the later rule wins, and the responsive block was the earlier one. Caught by
   looking at a rendered page, and the selftest now asserts the order. */
@media (max-width: 1000px) {
  /* minmax(0, 1fr) AND NOT A BARE 1fr, and the difference is 62 guides.
     A bare `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` minimum
     means the track may grow to its content's min-content width, past the
     container. Measured on a 375px screen: .artwrap was 327px wide and its own
     single column computed to 358.922px, so every paragraph and heading in the
     guide sat 8px past the right edge and the whole page could be dragged
     sideways. minmax(0, ...) sets that floor to zero, which is what makes a
     grid track actually clamp.
     The desktop rule above always had it right (`232px minmax(0, 1fr)`). Only
     the phone rule, which is the one that matters most here, did not.
     Invisible in the source: the number 358.922 exists nowhere until a browser
     resolves the track. Found by phone_render_gate.py, which loads the page. */
  .artwrap { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; margin-bottom: var(--gap-l); max-height: none; }
  .toc { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap-s) var(--gap-m); }
  .toc > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
  .toc > summary::after { content: "+"; font-size: 1.25rem; color: var(--ink-muted); }
  .toc[open] > summary::after { content: "-"; }
  .toc > summary h4 { margin: 0; }
  .toc a { border-left: 0; padding: 7px 0; }
  .toc a.on { background: none; }
}

/* THE WRITING. */
.article-body { max-width: var(--measure); font-size: 1.0625rem; line-height: 1.68; color: var(--ink); }
.article-body > p:first-of-type { font-size: 1.125rem; }
/* The first heading does not need the gap that separates two sections. On a
   phone it left a blank screen between the contents and the first sentence. */
.article-body > h2:first-child { margin-top: 0; }
.article-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: var(--track-tight);
  font-weight: var(--w-light); margin: var(--gap-xl) 0 var(--gap-s); scroll-margin-top: 100px; }
.article-body h3 { font-size: 1.15rem; font-weight: var(--w-medium); margin: var(--gap-l) 0 var(--gap-xs);
  scroll-margin-top: 100px; }
.article-body h4 { font-size: 1rem; font-weight: var(--w-medium); margin: var(--gap-m) 0 var(--gap-xs); }
.article-body p { margin: 0 0 var(--gap-m); }
/* A BARE URL AS LINK TEXT MUST BE ABLE TO BREAK. Several guides print the full
   address of a source rather than a title, and a URL has no spaces in it, so
   with the default `overflow-wrap: normal` it cannot wrap and simply runs off
   the side of the screen. Measured on a 375px phone: one 473px link pushed the
   whole pressure canning page to 519px wide and made it drag sideways.
   `anywhere` rather than `break-word` because only `anywhere` also shrinks the
   element's own min-content size, which is what a grid track measures itself
   against. This is the same min-content trap that made the article grid 359px
   wide inside a 327px container. */
.article-body a { color: var(--green-700); text-underline-offset: 3px;
  overflow-wrap: anywhere; }
/* AND A LONG IDENTIFIER IN PLAIN PROSE, not only in a link. The companion
   planting guide prints its references by hand, so the DOI
   "10.2134/agronj1996.00021962008800060004x" is ordinary text in an <li>. The
   list item's own box fitted the screen while that string painted 57px past
   it, which is why the box-edge check could not see it and the gate blamed a
   pseudo-element that was never there. `break-word` and not `anywhere` here:
   this applies to every paragraph, and `anywhere` would let ordinary words
   break mid-word when the line is tight, which reads as a typesetting fault. */
.article-body p, .article-body li, .article-body td, .article-body th {
  overflow-wrap: break-word; }
.article-body a:hover { color: var(--ink); }
.article-body strong { font-weight: var(--w-medium); color: var(--ink); }
.article-body em { font-style: italic; }
.article-body ul, .article-body ol { margin: 0 0 var(--gap-m); padding-left: 1.35em; }
.article-body li { margin-bottom: 8px; }
.article-body li::marker { color: var(--ink-muted); }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-xl) 0; }
.article-body del { color: var(--ink-muted); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.article-body figure { margin: var(--gap-l) 0; }
.article-body figcaption { font-size: var(--step-small); color: var(--ink-muted); margin-top: 10px; }
.article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em;
  background: var(--white-200); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 6px; }

/* TABLES. 445 of them, 6,375 cells. They are the densest thing on these pages
   and the first thing that looks cheap if it is left to the browser. */
.article-body table { width: 100%; border-collapse: collapse; margin: var(--gap-m) 0 var(--gap-l);
  font-size: .9375rem; display: block; overflow-x: auto; }
@media (min-width: 700px) { .article-body table { display: table; } }
.article-body th { text-align: left; background: var(--green-900); color: var(--white-000);
  font-weight: var(--w-medium); padding: 12px 14px; vertical-align: top; }
.article-body thead tr:first-child th:first-child { border-radius: var(--radius) 0 0 0; }
.article-body thead tr:first-child th:last-child { border-radius: 0 var(--radius) 0 0; }
.article-body td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.article-body tbody tr:nth-child(odd) { background: var(--white-100); }

.article-body blockquote { margin: var(--gap-l) 0; padding: var(--gap-m) var(--gap-l);
  background: var(--lime-100); border-radius: var(--radius); }
.article-body blockquote p:last-child { margin-bottom: 0; }

/* The compound cards the older builder produced on 20 pages. */
.article-body .compound-card { display: block; background: var(--white-100); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--gap-m) var(--gap-l); margin: var(--gap-l) 0; }

/* "Back to the library". Generated furniture, so it is styled but never counted
   as the article's own writing. */
.article-body .article-footer { margin-top: var(--gap-xl); padding-top: var(--gap-m);
  border-top: 1px solid var(--line); font-size: .9375rem; }
.article-body .article-footer p { margin: 0; }

/* The blocks the pipeline adds carry their own inline colours already, so all
   they need here is room and a consistent measure. */
.article-body .nf-faq h2 { margin-top: var(--gap-xl); }
.article-body .nf-faq-item summary::marker { color: var(--ink-muted); }
.article-body .nf-empty-frame { border: 1px dashed var(--line); border-radius: var(--radius);
  padding: var(--gap-l); text-align: center; color: var(--ink-muted); font-size: var(--step-small); }

/* A diagram is a figure, not a hero. Left to fill the column it swelled to most
   of the screen on a desktop and read as a poster; capped, it sits inside the
   reading measure the way a table does. */
.nf-figure { margin: var(--gap-l) 0; max-width: 560px; }
.nf-figure svg { display: block; width: 100%; height: auto; }
/* TEXT IS CENTRED ON ITS POINT BY DEFAULT, and that is not cosmetic. Every
   label in these figures was positioned at the CENTRE of the thing it names, so
   without this the words start at that point and run right: on a 390px phone
   the processing flow lost its last box off the edge and every label inside a
   box was cut in half ("cool in 2 hr", "dark, seale"). Labels that hang off a
   leader line are marked .fg-l and start at their point instead. */
.nf-figure text { text-anchor: middle; }
.nf-figure .fg-l { text-anchor: start; }
.nf-figure .fg-r { text-anchor: end; }
.nf-figure figcaption { font-size: var(--step-small); color: var(--ink-muted);
  margin-top: 10px; line-height: 1.5; }
.nf-figure .fg-frame { fill: var(--white-100); stroke: var(--line); }
.nf-figure .fg-line { stroke: var(--ink); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nf-figure .fg-soft { stroke: var(--line); fill: none; }
.nf-figure .fg-fill { fill: var(--accent-soft); stroke: var(--ink); }
.nf-figure .fg-accent { fill: var(--accent); stroke: var(--ink); }
.nf-figure .fg-solid { fill: var(--ink); }
.nf-figure text { font-family: var(--font-ui); fill: var(--ink); font-size: 13px; }
.nf-figure .fg-t-small { font-size: 11.5px; fill: var(--ink-muted); }
.nf-figure .fg-t-key { font-size: 12.5px; font-weight: 500; }