/* The guides at /learn — what the kit does not already say.
 *
 * The history: this file began as the whole of the old front page's system,
 * 40KB serving nine article pages that used a quarter of it, and was cut to
 * what a long read needs. The owner put the reason plainly on 8 September
 * 2026 (the guides page still had the old design), and again on 23 September,
 * when the design sheets won over the brand book on look
 * (research/sheets-win.md): a guide is the Web sheet's screen 11 on a wide
 * screen and 13b on a phone, and the /learn index is screen 09's "From the
 * guides" cards.
 *
 * The shell and every component are site/kit.css's; a guide links kit.css and
 * then this file, nothing else. Everything here is guide-only and composed
 * from the kit's tokens: no colour, shadow or radius is typed
 * (tools/the-site-paints-the-tokens-gate.mjs, check 5), and
 * tools/css-used-gate.mjs holds the line in both directions — a rule with no
 * wearer fails the build, and so does a class with no rule.
 *
 * What the sheet draws and this builds: an article column of at most 720 and
 * a column of at most 280 beside it, 40 apart, collapsing to one; the byline
 * as the kicker, the title at 40/600 (28 on a phone), the description as the
 * 21px standfirst; the body at 18/1.65 with 20/600 section heads; the
 * questions as a sunk card of rows; the sources at 16/1.6 in ink.secondary; beside
 * the article, "On this page" as a sunk card and the argument on the plate,
 * held in view. What the sheet draws and this no longer builds (2 Oct 2026,
 * docs/LOG.md): the plate's Start, and 13b's bar held at the foot of a phone's
 * screen with a second one. A guide has one Start, the nav's, and the argument
 * is a sentence and a link. R and $ are never coloured here: nothing in this
 * file gives a figure a hue.
 *
 * 13 Oct 2026: the website has a look of its own (design/website-v2), and it
 * arrives in /v2.css, linked after this file, from
 * design/website-v2/look/30-learn.css. This file still says where each piece
 * of a guide and of the index sits, in the kit's own sizes and tokens, so the
 * page is whole without the second sheet; the faces, the display type and the
 * paint are the second sheet's. What that design added to the markup is here
 * too: the crumb and the eyebrow over a guide's title, "The short answer"
 * box, the topic filter on the index, and the index as one featured guide and
 * rows. */

/* ---- The page -------------------------------------------------------------- */
/* A guide is white, as the sheet draws it: the nav, the page and the reading
 * all on the surface, the cards sunk into it. The index stays on the canvas,
 * with its cards lifted out of it. */
.guide-page { background: var(--fill-raised); }
.guide, .guide-index { max-width: calc(var(--wide) + 2 * var(--s4)); margin: 0 auto;
  padding: 56px var(--side) var(--s5); }

/* ---- The grid --------------------------------------------------------------- */
/* One column first. The side column's two pieces take their own places in the
 * reading order (`display: contents`), so the markup says neither twice, and
 * so does the article's: its opening, which is the answer, stands above the
 * contents, and its sections below them. The contents were a 500px box between
 * the picture and the first answer at 390 (2 Oct 2026); they are folded under
 * their label there now, and the argument comes after the last section. */
.guide { display: grid; grid-template-columns: minmax(0, 1fr); }
.guide-side { display: contents; }
.guide-head { order: 1; }
.guide-hero { order: 2; }
.guide-lead { order: 3; }
.guide-contents { order: 4; }
.guide-rest { order: 5; }
.argument { order: 6; }
.guide-after { order: 7; }
@media (max-width: 1039px) {
  .guide-body { display: contents; }
}
@media (min-width: 1040px) {
  .guide { grid-template-columns: minmax(0, var(--measure)) minmax(0, 280px);
    column-gap: var(--s4); justify-content: start; }
  .guide > *, .guide-side > * { grid-column: 1; order: 0; }
  /* The column beside the article, held in view. It is taller than a short
   * window when a guide has many sections, so it scrolls inside itself rather
   * than hiding the argument below the fold for the whole article. */
  .guide > .guide-side { display: grid; gap: 16px; align-content: start; grid-column: 2;
    grid-row: 1 / span 4; align-self: start; position: sticky; top: 24px;
    max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- The head --------------------------------------------------------------- */
.guide-head { display: grid; gap: 14px; margin: 0 0 24px; }
.guide-head > * { margin: 0; }
.guide-byline { font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }
/* The crumb: the way back to the list and the guide's topic. Its link is a
 * finger's height at every width, because the row is short and alone. */
.guide-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3;
  color: var(--ink-secondary); }
.guide-crumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink-secondary); }
.guide-eyebrow { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-secondary); }

/* ---- Pictures ----------------------------------------------------------------
 * A figure is a block with something said about it, never a bare image in a
 * paragraph; its box is painted before the file arrives (the ledger's width
 * and height are on the tag), so the text under it does not jump; the caption
 * and the credit are readable text in ink.secondary, never the sub-legible grey that
 * says "we would rather you did not read this". Each picture has a ledger row
 * (tools/pictures.mjs); nothing here adds one. The guide's hero, the one
 * picture on screen before anybody scrolls, is cut to the sheet's wide box
 * rather than shown at its own height, which put the first paragraph a full
 * screen down. A credit line (tools/pictures.mjs creditHtml, a span in the
 * caption) had four rules here until 2 Oct 2026, when the last photograph left
 * the guides and every picture became the site's own; they come back with the
 * first picture that owes a credit. */
.figure { margin: 0 0 24px; }
.figure img { display: block; width: 100%; height: auto; max-width: 100%;
  background: var(--fill-weekColumn); border-radius: var(--r-group); }
.figure.hero img { aspect-ratio: 15 / 8; object-fit: cover; }
.figure figcaption { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }
.guide-hero .figure { margin: 0 0 24px; }

/* ---- The column beside the article ---------------------------------------- */
/* "On this page": the kit's sunk card, as the sheet draws it — a label, then
 * the entries at 16, the one being read in ink at 500 and the rest in ink.secondary.
 * The sheet numbers nothing, so the kit's counter is not drawn here. */
.guide-contents { margin: 0 0 24px; padding: 20px; }
.guide-contents-label { display: block; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-secondary); }
.guide-contents ol { margin: 12px 0 0; gap: 8px; }
.guide-contents li { display: block; font-size: 16px; line-height: 1.4; }
.guide-contents li::before { content: none; }
.guide-contents a { color: var(--ink-secondary); }
.guide-contents a[aria-current] { color: var(--ink-primary); font-weight: 500; }
/* The fold. The checkbox is never drawn: its label is the row a reader
 * presses, and the + beside it says which way it goes, as the questions' rows
 * do. Beside the article on a wide screen the list is always open and the
 * checkbox is out of the page altogether, so the label is only a label. */
.guide-contents-toggle { display: none; }
@media (max-width: 1039px) {
  .guide-contents { position: relative; padding: 0 20px; }
  .guide-contents-toggle { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px;
    margin: 0; opacity: 0; pointer-events: none; }
  .guide-contents-label { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; font-size: 16px; color: var(--ink-primary); cursor: pointer; }
  .guide-contents-label::after { content: "+"; font: 400 22px/1 var(--ui); color: var(--ink-secondary); }
  .guide-contents-toggle:checked + .guide-contents-label::after { content: "\2212"; }
  .guide-contents-toggle:focus-visible + .guide-contents-label { outline: 2px solid var(--ink-primary);
    outline-offset: 2px; border-radius: var(--r-row); }
  .guide-contents ol { display: none; }
  .guide-contents-toggle:checked ~ ol { display: grid; margin: 0 0 12px; }
}

/* The argument, on the plate: whose sentence it is in the plate's second ink,
 * the sentence in its ink, and the one link on. No button: the page's Start is
 * the nav's. */
.argument { display: grid; gap: 8px; margin: var(--s4) 0 0; padding: 20px;
  background: var(--plate); color: var(--plate-ink); border-radius: var(--r-group); }
.argument > * { margin: 0; }
.argument-name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--plate-ink-2); }
.argument-line { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em;
  color: var(--plate-ink); }
.argument-more { font-size: 15px; line-height: 1.5; }
.argument-more a { color: var(--plate-ink); text-decoration-color: var(--plate-ink-2); }
@media (min-width: 1040px) {
  .guide-contents, .argument { margin: 0; }
}

/* ---- The article ------------------------------------------------------------ */
/* The kit's .prose, at the sheet's 18/1.65 on every width (13b draws 18 on the
 * phone too), paragraphs 20 apart, section heads at 20/600. */
.guide-body .prose { font-size: 18px; line-height: 1.65; }
.guide-body .prose p { margin: 0 0 20px; }
.guide-body .prose h2 { margin: var(--s4) 0 14px; }
/* The sections open on a heading; on a wide screen it follows the answer's
 * last paragraph, on a narrower one the folded contents. */
.guide-body .guide-rest > h2:first-child { margin-top: var(--s3); }
.guide-body .prose ol { padding-left: 30px; }
/* "The short answer": the opening's first paragraph, whole, in a tinted box
 * under its label (tools/articles.mjs shortAnswer). The label is a paragraph. */
.guide-answer { margin: 0 0 20px; padding: 20px 22px; background: var(--ok-tint); border-radius: var(--r-group); }
.guide-body .guide-answer .guide-answer-label { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--ok-ink); }
.guide-body .guide-answer > p:last-child { margin-bottom: 0; }
.guide-body .prose h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.guide-body .prose blockquote { margin: 0 0 20px; padding: 2px 0 2px 16px;
  border-left: 2px solid var(--line-hairline); color: var(--ink-secondary); }
.guide-body .prose pre { background: var(--fill-weekColumn); border: 1px solid var(--line-hairline);
  border-radius: var(--r-row); padding: 14px 16px; overflow-x: auto; margin: 0 0 20px;
  font: 400 14px/1.65 var(--figures); }
.guide-body .prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* A table is the one thing in a guide that can outgrow the column, so it
 * scrolls inside the kit's box rather than pushing the page sideways. A cell
 * in a guide is a sentence, so it wraps, which the kit's data table does not. */
.guide-body .k-table-wrap { margin: 0 0 20px; }
.guide-body .k-table { font-size: 15px; line-height: 1.5; }
.guide-body .k-table th, .guide-body .k-table td { height: auto; padding: 10px 14px;
  white-space: normal; overflow: visible; vertical-align: top; }
.guide-body .k-table tbody tr:hover { background: transparent; }

/* ---- After the article: the questions, the sources, more guides ------------ */
.guide-after { max-width: var(--measure); }
.guide-section { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink-primary); margin: var(--s4) 0 14px; }

/* The questions: a sunk card of the kit's accordion rows. Each row is a
 * <details>, so it opens with no script. */
.guide-faq-list { background: var(--fill-weekColumn); border: 1px solid var(--line-hairline);
  border-radius: var(--r-group); padding: 4px 18px; }
/* The rows themselves, the + and the answer are the kit's: one accordion,
 * here and on the front page (kit.css .faq). */

/* The sources: the sheet's list at 16/1.6 in ink.secondary, ten apart, unnumbered. */
.sources ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;
  font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
.sources a { color: var(--ink-secondary); overflow-wrap: anywhere; }
.sources a:hover { color: var(--ink-primary); }

/* More guides: the kit's rows, each one link: the title, and its reading time
 * at the row's end. */
.more a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%;
  text-decoration: none; }
.more a:hover .more-title { text-decoration: underline; }
.more-title { font-weight: 500; }
.more-meta { font: 400 14px/1.3 var(--figures); color: var(--ink-secondary); white-space: nowrap; }
.more-all { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-row); font-size: 16px; }

/* ---- The index ---------------------------------------------------------------- */
.guide-index-head { display: grid; gap: 14px; max-width: var(--measure); margin: 0 0 var(--s4); }
.guide-index-head > * { margin: 0; }
.guide-index-meta { font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }
.guide-index-meta a { color: var(--ink-secondary); }
/* The topic filter: All and the three topics, each a finger's height. It is
 * written `hidden` and learn.js shows it, so a page with no script has no
 * dead buttons; this rule keeps the attribute's word over the flex below. */
.guide-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--s3); }
.guide-topics[hidden] { display: none; }
.guide-topic { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px;
  border: 1px solid var(--line-chrome); border-radius: var(--r-group); background: transparent;
  color: var(--ink-secondary); font: 500 15px/1.3 var(--ui); cursor: pointer;
  -webkit-appearance: none; appearance: none; }
.guide-topic[aria-pressed="true"] { background: var(--ink-primary); border-color: var(--ink-primary);
  color: var(--fill-raised); }
.guide-topics-shown { margin: 0 0 0 8px; font: 400 14px/1.3 var(--figures); color: var(--ink-secondary); }

/* The list: one column of rows. A row is its picture, small; the title with
 * the card's one line under it; and the date and reading time at the row's
 * end. The third grid row takes whatever the picture is taller by, so the
 * title and its line stay together. */
.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.guide-card { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr;
  gap: 6px 20px; align-items: start; padding: 20px 0; border-top: 1px solid var(--line-row);
  color: var(--ink-primary); text-decoration: none; }
.guide-card > * { margin: 0; }
.guide-card .k-card-img { grid-column: 1; grid-row: 1 / span 3; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 3 / 2; margin: 0; object-fit: cover; border-radius: var(--r-row); }
.guide-card .k-card-head { grid-column: 2; grid-row: 1; text-wrap: balance; }
.guide-card .k-kicker { grid-column: 3; grid-row: 1; white-space: nowrap; }
.guide-card-line { grid-column: 2; grid-row: 2; font-size: 16px; line-height: 1.5; color: var(--ink-secondary); }
.guide-card:hover .k-card-head { text-decoration: underline; text-decoration-color: var(--line-chrome); }
@media (max-width: 640px) {
  .guide-card { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 4px 14px; }
  .guide-card .k-card-img { grid-row: 1 / span 4; }
  .guide-card .k-kicker { grid-column: 2; grid-row: 1; white-space: normal; }
  .guide-card .k-card-head { grid-row: 2; }
  .guide-card-line { grid-row: 3; }
}
/* The newest guide, featured: the plate, its picture beside the words on a
 * wide screen and over them on a narrow one. The same markup as a row. */
.guide-cards .guide-first .guide-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
  gap: 10px; margin: 0 0 var(--s3); padding: 24px; border-top: 0; border-radius: var(--r-group);
  background: var(--plate); color: var(--plate-ink); }
.guide-cards .guide-first .guide-card > * { grid-column: 1; grid-row: auto; }
.guide-cards .guide-first .k-card-img { aspect-ratio: 15 / 8; }
.guide-cards .guide-first .k-card-head { font-size: 28px; color: var(--plate-ink); }
.guide-cards .guide-first .k-kicker, .guide-cards .guide-first .guide-card-line { color: var(--plate-ink-2);
  white-space: normal; }
@media (min-width: 821px) {
  .guide-cards .guide-first .guide-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr; column-gap: var(--s4); padding: var(--s4); }
  .guide-cards .guide-first .guide-card > .k-card-img { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: 3 / 2; }
}

/* A linked heading wants air above it. The nav does not stick. */
[id] { scroll-margin-top: var(--s3); }

/* ---- Phones --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .guide, .guide-index { padding-top: 24px; }
  .guide-head { gap: 12px; margin-bottom: 18px; }
  /* The sheet's phone guide header: the tile and "Guides", no wordmark beside
   * them. The lockup keeps its name for a screen reader (its aria-label). */
  .guide-page .k-nav .k-wordmark { display: none; }
  .guide-page .k-nav-home .k-pill { min-height: var(--tap); padding: 0 4px;
    background: transparent; border-color: transparent; font-size: 15px; }
  .guide-contents li a { display: flex; align-items: center; min-height: var(--tap); }
  .guide-contents ol { gap: 0; }
  .argument-more a, .more a, .more-all a, .guide-index-meta a {
    display: inline-flex; align-items: center; min-height: var(--tap); }
  .more a { display: flex; }
  .sources ol { gap: 0; }
  .sources li { display: flex; align-items: center; min-height: var(--tap); padding: 4px 0; }
}