/* ==========================================================================================================
   ELLIS STERLING v2, INNER PAGES. Loaded after site.css on every page except the homepage.
   Spec: _plan/INSIGHTS-SPEC.md sections 4 and 7, as revised after the design review of 2026-10-15 (the changes are
   listed in each section below). Starting points: _partials/page-template.html and _partials/article-template.html.

   Everything here is built on site.css: its tokens (colours, gutters, the 12-column grid, the spacing steps), its
   grounds (.g-deep, .g-forest, .g-ivory, .g-ink, which set --fg, --fg2, --rule, --mark and --focus), its type roles
   (.t-h2, .t-h3, .t-lede, .t-body, .t-small), the ledger, .lnk and .btn-bronze. Nothing here adds a colour or a font.
   The page keeps the homepage's one left edge: every heading, first line, list and link starts on the spine
   (grid column 1); what you read second sits on the half line (grid column 7). Below 960px everything is one column on
   the spine, in DOM order, and the DOM order is the reading order.

   Motion: hover only inside (hover:hover) and (pointer:fine); transitions name their properties and touch only colour,
   opacity or transform; site.css stops them all under reduced motion. Class names are binding: _plan/build_insights.py
   writes the read-next block, the closing call and the hub listing in this markup, and assets/js/insights-track.js
   reads it.

   Order of this file:
     1. tokens and the two Insights heading roles   2. page head and the breadcrumb trail   3. article body and prose
     4. the spine's second read: notes and guide links   5. steps   6. table   7. sources
     8. read next (and the linked-row rules the hub and the FAQ share)   9. hub listing   10. questions (FAQ)
     11. closing call   12. the current page in the chrome   13. print
   The shared pieces that live elsewhere: the current-page underline in the nav (site.css section 4, widened for
   parent pages in section 12 here) and the question disclosure script (site.js block 4).
   ========================================================================================================== */

/* 1. TOKENS. Sizes at 390 / 1024 / 1280 / 1568px.
   --nav-h    the nav's height (hero 21's nav: 22px padding around a 44px row; 68px at 560 and below), used only to
              clear it in page heads, since the nav sits over the head as it sits over the hero.
   --bar-h    the scroll-up bar's height (site.css section 5): a statement that travels with its text stops this far
              plus a row gap under the top of the window, so the bar never covers it.
   --fs-prose article reading text: 17 / 18.6 / 19.3 / 20px. The homepage body (16.6px at 1280) is sized for two to
              four lines; sustained reading wants 19 to 20px at laptop distance.
   --fs-sec   a statement: an article's section heading, a hub stage and "Read next": 22 / 22 / 24.3 / 29.8px, the
              homepage h3 size without its phone drop to 19px (over 17px prose a 19px heading was only 1.12 times
              larger). 20px below 400px, so on the smallest phones the h1 (24 to 26px) stays clearly the largest line.
   --fs-sub   a name: step names, table row names, "Sources" and the guide titles in read next and on the hub: serif
              at the prose size, so a statement is always the larger thing (1.29 / 1.18 / 1.26 / 1.49 times). */
:root{--nav-h:88px;--bar-h:64px;--fs-prose:clamp(1.0625rem,1rem + .255vw,1.25rem);--fs-sec:clamp(1.375rem,1.9vw,1.875rem);--fs-sub:var(--fs-prose)}
@media (max-width:560px){:root{--nav-h:68px}}
@media (max-width:399px){:root{--fs-sec:1.25rem}}
/* The two Insights heading roles, one rule each, so a statement and a name look the same wherever they appear.
   Statement: Source Serif 4 400, a sentence ending in a period (the only noun statements are "Read next" and the hub's
   stage titles). Name: Source Serif 4 400 at the prose size. Both balance their lines. */
.ar-h,.ix-stage>h2,.rn-h{font-family:var(--serif);font-weight:400;font-size:var(--fs-sec);line-height:1.2;
  letter-spacing:-.005em;text-wrap:balance;max-width:16em;color:var(--fg)}
.ar-h-sub,.step-name,.ix-name,.rn-name{font-family:var(--serif);font-weight:400;font-size:var(--fs-sub);line-height:1.3;
  letter-spacing:0;text-wrap:balance;max-width:20em;color:var(--fg)}
/* A title with a long unbroken token (a form code, a URL, a compound word) wraps inside its column instead of
   pushing the page sideways on a phone. Only a word wider than its whole line is ever broken. */
main :is(h1,h2,h3){overflow-wrap:anywhere}

/* 2. PAGE HEAD (.ph, on deep). The firm speaking: deep is the hero's ground, so the homepage nav sits on it unchanged
   and the right side may stay open. On the spine: on articles the breadcrumb trail, then the h1 (set in .t-h2, 27.3 /
   47.4 / 58px, so nothing under the hero word is bigger than the hero line), 20px (site.css), the intro (.t-lede),
   16px, then for articles "Last reviewed" and the date (.t-small, --fg2). No reading time, label or meta row.
   Padding: the nav's height plus a group gap on top (160 / 146 / 108px at 1568 / 1280 / 390); --sec below on other
   inner pages. On Insights pages the head ends a group gap under its last line: the change from deep to the paper
   already marks the edge, so a second --sec there only pushed the first statement and the first guide off the
   first screen (the review measured 187px of padding between the hub's lede and its first heading). */
.ph{padding-top:calc(var(--nav-h) + var(--gap-group));padding-bottom:var(--sec)}
.ar>.ph,[data-insights="hub"]>.ph{padding-bottom:var(--gap-group)}
.ph .ph-meta{margin-top:16px}
/* A ledger straight after a section's heading or intro starts --gap-head below it, as on every homepage section.
   One class of specificity, so it overrides the ledger's margin:0 in site.css (this file loads later). It places the
   questions, the 404's list and the consultation pages' lists; read next and the hub's stages say it below for
   their own headings. */
:where(.t-h2,.t-lede)+.ledger{margin-top:var(--gap-head)}
/* The breadcrumb trail (nav.crumbs, articles only, written by _plan/build_insights.py with its BreadcrumbList data):
   Home / Insights / the article, as INSIGHTS-READ-NEXT.md 5b.6 asks. A reader who lands on an article from a search
   has not seen the hub, so the trail says where the page sits. The last step is the page itself: plain text, not a
   link, aria-current="page". It is navigation, not a label: sentence case, small text in the second tone (.t-small's
   role), real underlined links (the footer's legal links), a slash between them. It starts --gap-row under the
   nav's height and sits --gap-head above the title, so the title and its intro stay one group under it. A long
   title wraps the trail onto a second line rather than being cut. The hub has no trail: it is one level down, and
   the logo and the nav's underlined Insights already give both links. Left out of print. */
.ph:has(.crumbs){padding-top:calc(var(--nav-h) + var(--gap-row))}
.crumbs{font-family:var(--sans);font-weight:400;font-size:.875rem;line-height:1.5;letter-spacing:.01em;color:var(--fg2);max-width:40em}
/* one line of text that wraps between words like a sentence (a flex row would drop the whole title to a new line) */
.crumbs ol{margin:0;padding:0;list-style:none}
.crumbs li{display:inline}
.crumbs li+li::before{content:"/";content:"/" / "";margin-inline:.5em}
/* 12px of padding cancelled by margins: a 45px target on a 21px line, and the trail keeps its height */
.crumbs a{display:inline-block;padding-block:12px;margin-block:-12px;text-decoration-line:underline;
  text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .18s ease,opacity .1s var(--out)}
.crumbs a:active{opacity:.72}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--fg)}}
.crumbs+.t-h2{margin-top:var(--gap-head)}

/* 3. ARTICLE BODY (.ar-main, on ivory). An article is a long ledger. Each section is a row: its statement on the
   spine, its text on the half line, first baselines aligned. Skim the spine and you have the argument; read across
   and you have the detail. A section break (--gap-group, a rule, --gap-row) is always larger than a step or table
   break (a rule plus --gap-row or 16px), so the outline reads at a glance. The first section has no rule: the change
   from the deep head to the paper already marks it.

   Revised after the design review (2026-10-15): with every section held to one height budget, a one to three line
   statement sat beside seven to ten lines of text, so the spine was 75 to 90% empty ivory and every article was the
   same block repeated. Now the spine carries something on every screen:
   - From 960px the statement travels with its own text: it stays --bar-h plus a row gap under the top of the window
     while its section's text scrolls past, and stops at the end of that text. No animation is involved (the browser
     only keeps it in view), so it is the same with reduced motion and with JS off. This reverses INSIGHTS-SPEC
     decision 15 and needs the owner's yes; deleting the one rule marked "TRAVEL" below turns it off and leaves
     everything else in place.
   - The section's note and its related guide, when it has them, sit on the spine under the statement, at the foot
     of the section (section 4), so the prose runs without interruptions and the spine has a second read.
   - Sections are no longer one size: some are two lines, a few run longer, because the statement now stays with
     its text however long the text is.
   How it is built: the section grid has two rows, 1fr then auto. The statement fills the first row (the h2 is a
   subgrid of the section's rows, so its text keeps the section's first-baseline alignment while the h2's box
   reaches the end of the row, and the sticky text inside it can travel no further); the spine's second read sits in
   the second row; the text spans both. Steps and tables follow in rows of their own, under both. */
.ar-main{padding-top:var(--sec);padding-bottom:0}
.ar-sec{border-top:1px solid var(--rule);padding-top:var(--gap-row);align-items:first baseline;grid-template-rows:1fr auto}
.ar-sec:first-child{border-top:0;padding-top:0}
.ar-sec+.ar-sec{margin-top:var(--gap-group)}
.ar-h{grid-column:1/7;grid-row:1}
.ar-h>span{display:block}
.ar-text{grid-column:7/13;grid-row:1/span 2;min-width:0}
@media (min-width:960px){
  .ar-h{display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);align-self:stretch}
  .ar-h>span{align-self:first baseline}
  /* TRAVEL: the statement stays in view beside its own text (owner's decision pending, see above) */
  .ar-h>span{position:sticky;top:calc(var(--bar-h) + var(--gap-row))}
  /* a label that names a short list stays beside its first line */
  .ar-src .ar-h>span{position:static}
}
/* Prose: Source Sans 3 at 370 in the full text colour (72% read grey over a thousand words), 1.65 leading, 59ch.
   Measured on the half line (median characters a line, spaces included): 68 at 1280, 1440, 1568 and 1920, 57 at
   1024, 47 at 390. Every direct child shares the 59ch measure, so paragraphs and lists end on one right edge.
   No sub-heads in the text column (a thought that needs one becomes its own section), no bold, no italics. Form
   numbers take a non-breaking hyphen (SS‑4 in the HTML) so they never split at the line end. */
.prose{font-family:var(--sans);font-weight:370;font-size:var(--fs-prose);line-height:1.65;color:var(--fg);
  font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.prose>*{max-width:59ch}
.prose>*+*{margin-top:16px}
.prose :is(p,li){max-width:59ch;text-wrap:pretty}
/* Lists: from 960px the markers hang in the column gap, so the text keeps the half line; below 960 a 1.1em indent.
   Discs in the ground's bronze, numbers in the second tone. */
.prose ul{list-style:disc;padding-left:0}
.prose ol{list-style:decimal;padding-left:0}
.prose li+li{margin-top:8px}
.prose ul>li::marker{color:var(--mark)}
.prose ol>li::marker{color:var(--fg2)}
/* Links in running text (and in Sources, section 7): underlined in bronze at rest, so they read as links on touch
   screens; no arrows. A link sits on a noun phrase that names its guide's topic inside a sentence the paragraph
   needs anyway, never on "read more" and never as a closing "[guide] covers this" sentence. */
.prose a,.src a{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--mark)}
@media (hover:hover) and (pointer:fine){
  .prose a,.src a{transition:text-decoration-color .16s var(--out)}
  .prose a:hover,.src a:hover{text-decoration-color:currentColor}
}
@media (max-width:959px){
  .ar-sec{grid-template-rows:none}
  .ar-h,.ar-text{grid-column:1/-1;grid-row:auto}
  .ar-text{margin-top:16px}
  .prose :is(ul,ol){padding-left:1.1em}
}

/* 4. THE SPINE'S SECOND READ (div.ar-side, after the text in the DOM). What qualifies a section, and the guide that
   takes it further, read after the section's text: on phones they follow the text; from 960px they sit on the spine
   at the foot of the section, their last line on the text's last baseline (see below), so the statement at the top
   and these at the foot frame the text between them. They keep the statement's measure (16em of the statement size, about
   390px at 1280), so the spine's two reads share one right edge.
   The note (aside.note): a third read, smaller and in the second tone, with one hairline above it, the footnote's
   rule, which separates it from the statement when the two meet. Its first sentence carries the point. No heading,
   label, icon, fill or box. One note a section at most, and never in a section with steps or a table.
   The guide link (a.ar-go): the related guide by its exact title (build_insights.py checks it against the map), in
   the site's text-link role (Source Sans 3 600, 15px) with the bronze arrow glued to the last word by a no-break
   space, so a wrapped title never leaves the arrow alone. The FAQ's guide link (section 10) is the same object.
   12px block padding gives the 44px target; the bottom half is cancelled so the section ends at the link's text. */
.ar-side{grid-column:1/7;grid-row:2;align-self:end;min-width:0;max-width:calc(var(--fs-sec) * 16);padding-top:var(--gap-head)}
/* The foot of the spine sits on the text's last baseline. The text spans both rows, and Chrome does not baseline-align
   an item with a partner that spans rows (it falls back to end), so the box ends on the text's last line box and is
   lifted by the difference between the two lines' depth under their baselines. Depth under the baseline of a line
   of Source Sans 3 = size x (line height / 2 - .312), .312 being half its ascent (1.024) less its descent (.4):
   prose .513, the 15px link .363, a note .488. */
.ar-side:has(>.ar-go:last-child){margin-bottom:calc(var(--fs-prose) * .513 - .9375rem * .363)}
.ar-side:has(>.note:last-child){margin-bottom:calc(var(--fs-prose) * .513 - var(--fs-body) * .488)}
.note{padding-top:16px;border-top:1px solid var(--rule)}
.note p{font-family:var(--sans);font-weight:370;font-size:var(--fs-body);line-height:1.6;color:var(--fg2);text-wrap:pretty}
.note p+p{margin-top:12px}
.ar-go,.faq-go{display:inline-block;padding-block:12px;margin-bottom:-12px;font-family:var(--sans);font-weight:600;
  font-size:.9375rem;line-height:1.35;letter-spacing:.01em;text-wrap:balance;color:var(--fg)}
.ar-go-a,.faq-go-a{color:var(--mark)}
.note+.ar-go{margin-top:4px}
.ar-side>.ar-go:first-child{margin-top:-12px}
@media (max-width:959px){
  .ar-side{grid-column:1/-1;grid-row:auto;align-self:auto;max-width:calc(var(--fs-prose) * 29.5);padding-top:var(--gap-head)}
  .ar-side:is(:has(>.ar-go:last-child),:has(>.note:last-child)){margin-bottom:0}
}

/* 5. STEPS (ol.steps, role="list"). After a short lead-in, the steps break out to the full measure as ledger rows:
   the numeral and the step name on the spine, the step text on the half line, a rule on each. Arabic numerals in the
   ground's bronze (Roman I to IV are the firm's own four steps on the homepage). The name is serif at the prose size,
   smaller than the statement above it. A name that wraps hangs its second line under its first word, not under the
   numeral (padding-left plus a negative text-indent; the numeral resets the indent). The ol gives screen readers the
   count and the order, so the numerals are aria-hidden. No roundels, boxes, connectors or "Step 1" labels.
   A step may name the guide that covers it (a.ar-go.step-go, after the text): on the spine at the foot of the row,
   indented to the name's first word, so in the founder's guide the steps are also the map of the guides. */
.steps{grid-column:1/-1;margin-top:var(--gap-head)}
.steps>li{border-top:1px solid var(--rule);padding-block:var(--gap-row);align-items:first baseline;grid-template-rows:1fr auto}
.steps>li:last-child{padding-bottom:0}
.step-name{grid-column:1/7;grid-row:1;padding-left:1.6em;text-indent:-1.6em}
.step-num{display:inline-block;min-width:1.6em;text-indent:0;font-weight:300;color:var(--mark);font-variant-numeric:tabular-nums}
.step-text{grid-column:7/13;grid-row:1/span 2;min-width:0}
.step-go{grid-column:1/7;grid-row:2;align-self:end;justify-self:start;margin-top:8px;margin-left:calc(var(--fs-sub) * 1.6);
  margin-bottom:calc(var(--fs-prose) * .513 - .9375rem * .363 - 12px)}  /* on the text's last baseline, as in section 4 */
@media (max-width:959px){
  .steps>li{grid-template-rows:none}
  .step-name,.step-text,.step-go{grid-column:1/-1;grid-row:auto}
  .step-text{margin-top:12px}
  .step-go{align-self:auto;margin-top:4px;margin-bottom:-12px;margin-left:0}  /* the text starts on the spine here, so the link does too */
}

/* 6. TABLE (div.dt > table). A comparison you read across, so it sits on the grid at the full measure: the row name
   (serif at the prose size) on the spine, the values on the half line, one value column (7 to 12) or two (7 to 9 and
   10 to 12, the footer's second start). Column labels small in the second tone; a rule on each body row. No caption
   (the statement labels it: aria-labelledby), no stripes, vertical rules, ticks or crosses. At most two value
   columns and three or four rows. A two-value table keeps every cell to one line at 1280 (about 30 characters), so
   reading across is one jump, not a jump and a wrap; anything longer becomes a one-value table (a row name and one
   sentence), whose cells are set at the prose size so they read as part of the text around them.
   Changing display drops table semantics in some browsers, so the markup states every ARIA role. Below 960px each row
   is one block, and each value sits under a small label: a real span, aria-hidden (the column header still names the
   cell for assistive tech). */
.dt{grid-column:1/-1;margin-top:var(--gap-head);min-width:0}
.dt :is(table,thead,tbody){display:block}
.dt table{border-collapse:collapse}
.dt tr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:first baseline}
.dt thead tr{padding-bottom:12px}
.dt tbody tr{border-top:1px solid var(--rule);padding-block:16px}
.dt tbody tr:last-child{padding-bottom:0}
.dt :is(th,td){padding:0;text-align:left;vertical-align:baseline;font-weight:inherit;text-wrap:pretty;overflow-wrap:break-word}
.dt thead th{font-family:var(--sans);font-weight:400;font-size:.875rem;line-height:1.5;letter-spacing:.01em;color:var(--fg2)}
.dt tbody th{font-family:var(--serif);font-weight:400;font-size:var(--fs-sub);line-height:1.3;color:var(--fg)}
.dt td{max-width:60ch;font-family:var(--sans);font-weight:370;font-size:var(--fs-body);line-height:1.5;color:var(--fg);font-variant-numeric:tabular-nums}
/* one value column: the cell reads at the prose size, on the prose measure */
.dt tr:not(:has(.c3)) td{font-size:var(--fs-prose);line-height:1.55;max-width:59ch}
.dt .c1{grid-column:1/7}
.dt .c2{grid-column:7/10}
.dt .c3{grid-column:10/13}
.dt .c2:last-child{grid-column:7/13}  /* one value column: the whole half */
.dt-l{display:none}
@media (max-width:959px){
  .dt tr{display:block}
  .dt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .dt tbody th{display:block}
  .dt td{display:block;margin-top:10px}
  .dt-l{display:block;font-family:var(--sans);font-weight:400;font-size:.875rem;line-height:1.5;letter-spacing:.01em;color:var(--fg2)}
  /* with one value column there is nothing to tell apart, so the label would only repeat itself on every row */
  .dt tr>td:only-of-type .dt-l{display:none}
}

/* 7. SOURCES (section.ar-sec.ar-src, always last in the article). "Sources" on the spine in the name size (.ar-h-sub);
   the list on the half line, small and in the second tone, no markers (ul[class] in site.css), links underlined as in
   prose (section 3). */
.src{font-family:var(--sans);font-weight:400;font-size:.875rem;line-height:1.5;letter-spacing:.01em;color:var(--fg2);overflow-wrap:break-word}
.src li{text-wrap:pretty}
.src li+li{margin-top:8px}
.ar-src .ar-h-sub{max-width:20em}

/* 8. READ NEXT (section.rn, ivory, written whole by _plan/build_insights.py between the insights:readnext markers).
   The article's last statement, not a new page: it follows Sources with the article's own section break
   (--gap-group, a measure-wide rule, --gap-row), "Read next" is set in the statement role on the spine, and the
   three guides are ledger rows in the map's order, each title in the name role. So nothing in it is larger than the
   article's own headings, and the three rows and "All insights" take about two thirds of a 1280x800 screen.
   (Before the review it was a page of its own: a --sec, a stray rule and another --sec, then "Read next" at the h1's
   size.) The 2px overlap (padding putting everything back) keeps the ink body from showing as a hairline where the
   article's ivory meets this one at a fractional y, as on the homepage's turn into Insights.
   Each row: the title on the spine; on the half line the question this guide answers coming from this article (the
   map's per-link line, or the guide's intro), then "Read" and the bronze arrow, hidden from assistive tech, as
   INSIGHTS-READ-NEXT.md section 2 asks. Each row is one link: the title's link stretches over the row (::after), so
   the whole row is the target, a new tab opens from anywhere on it, the focus ring sits on the title and the link's
   name is the title. No slot labels or "recommended" wording.
   Motion: fine-pointer hover anywhere on the row underlines the title in bronze (160ms) and moves the arrow 3px
   (200ms); a press shows the underline. Clean hrefs with data-rn-from, -to, -pos and -slot, which
   assets/js/insights-track.js reads at click time. */
.rn{padding-top:calc(var(--gap-group) + 2px);margin-top:-2px;padding-bottom:var(--sec)}
.rn-head{border-top:1px solid var(--rule);padding-top:var(--gap-row)}
/* the heading owns the section's rule, so the first row starts under it without a second rule (two hairlines 96px
   apart with only "Read next" between them read as an empty row) */
.rn-head+.ledger{margin-top:var(--gap-head)}
.rn-head+.ledger>:first-child{border-top:0;padding-top:0}
.rn-go{display:inline-flex;gap:8px;margin-top:12px;font-family:var(--sans);font-weight:600;font-size:.9375rem;
  letter-spacing:.01em;color:var(--fg)}
.rn-go span{display:inline-block;color:var(--mark);transition:transform .2s var(--out)}
/* Linked rows and title links, one set of rules for read next, the hub's rows (section 9), the spine's guide links
   (section 4) and the questions' guide links (section 10): the row is the link's positioning box and the link
   stretches over it; the title's own span carries the underline, transparent at rest, bronze on hover and press, so
   it never runs under the arrow. */
.rn-row,.ix-row{position:relative}
.rn-link::after,.ix-link::after{content:"";position:absolute;inset:0}
.rn-t,.ix-t,.faq-go-t,.ar-go-t{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.2em}
.rn-link:active .rn-t,.ix-link:active .ix-t,.faq-go:active .faq-go-t,.ar-go:active .ar-go-t{text-decoration-color:var(--mark)}
@media (hover:hover) and (pointer:fine){
  .rn-t,.ix-t,.faq-go-t,.ar-go-t{transition:text-decoration-color .16s var(--out)}
  .rn-row:hover .rn-t,.ix-link:hover .ix-t,.faq-go:hover .faq-go-t,.ar-go:hover .ar-go-t{text-decoration-color:var(--mark)}
  .rn-row:hover .rn-go span{transform:translateX(3px)}
}

/* 9. HUB LISTING (section.ix, ivory). The map in reading order: three stages, each a statement on the spine (the
   stage title, in the statement role) and one ledger of guides, each title in the name role with the bronze arrow
   after it and the intro on the half line. The arrow is plain inline text glued to the last word by a no-break
   space, so it never wraps alone (and so it does not slide; the title's underline is the hover and press state).
   Revised after the review: a stage break is now clearly larger than a row break (--sec of open paper against a
   row's --gap-row, rule, --gap-row), where before two stages sat closer together than two rows. The stage headings
   dropped from the h1's size to the statement size and lost their ledes (the titles already say it), so the h1 is
   the largest line on the page and at 1280x800 the first screen shows three guides, not one.
   The 404 and the consultation pages use the same row markup with the homepage's larger titles (.t-h3), outside
   .ix-stage; the row, the stretched link and the title's underline are in section 8. */
.ix-stage+.ix-stage{margin-top:var(--sec)}
.ix-stage>h2+.ledger{margin-top:var(--gap-head)}
.ix-go{font-family:var(--sans);font-weight:400;font-size:.8em;color:var(--mark)}

/* 10. QUESTIONS (section.faq, forest: about you). A ledger of questions on the spine with each answer on the half
   line (below it under 960px), the answer in the second tone with a link to the guide that explains it in full.
   From 960px it stays an open ledger, as with JS off and in print: each answer is one or two sentences and already
   has its place on the half line, so a click to reveal it would only hide what fits. Below 960px, where the answers
   stack under their questions and an open list is long, site.js block 4 turns each question into a button
   (aria-expanded, aria-controls) and hides the answers with hidden="until-found" where supported, so find-in-page
   still opens them; it undoes that when the window widens past 960px and redoes it when it narrows.
   Rows open independently and without animation; only the mark turns, a plus to a minus, transform only.
   The button's 44px target comes from 11px of padding cancelled by -11px margins, so a one-line question has the
   same space above and below it (min-height would put all the extra under the text). The mark's bars are borders,
   so they survive forced colours; bronze on forest is 4.7:1. */
.faq-btn{display:block;width:100%;padding:11px 0;margin-block:-11px;text-align:left;background:none;border:0;font:inherit;
  letter-spacing:inherit;color:inherit;cursor:pointer;text-decoration-line:underline;text-decoration-color:transparent;
  text-decoration-thickness:1px;text-underline-offset:.2em;transition:opacity .1s var(--out)}
.faq-btn:active{opacity:.72}
.faq-end{white-space:nowrap}
.faq-mark{display:inline-block;position:relative;width:.42em;height:.42em;margin-left:.4em;vertical-align:.1em}
.faq-mark::before,.faq-mark::after{content:"";position:absolute}
.faq-mark::before{left:0;right:0;top:50%;margin-top:calc(max(1px,.05em) / -2);border-top:max(1px,.05em) solid var(--mark)}
.faq-mark::after{top:0;bottom:0;left:50%;margin-left:calc(max(1px,.05em) / -2);border-left:max(1px,.05em) solid var(--mark);
  transition:transform .2s var(--out)}
.is-open .faq-mark::after{transform:rotate(90deg)}
/* hidden="until-found" keeps the answer's box, so drop the phone's 12px or a closed row would sit lower than it rises */
.faq-a[hidden]{margin-top:0}
/* the guide link (its type is in section 4, its underline in section 8): 16px under the answer */
.faq-go{margin-top:4px}
@media (hover:hover) and (pointer:fine){
  .faq-btn{transition:text-decoration-color .16s var(--out),opacity .1s var(--out)}
  .faq-btn:hover{text-decoration-color:var(--mark)}
}
/* site.css stops transitions under reduced motion with a * selector, which does not reach pseudo-elements: the mark's
   bar turns on ::after, so it is stopped here */
@media (prefers-reduced-motion:reduce){.faq-mark::after{transition:none}}

/* 11. CLOSING CALL. The homepage's consultation section (section.s-co.sec.g-deep from site.css): the same heading and
   button everywhere, the button with data-consult="closing" for tracking. On Insights pages build_insights.py writes
   it between the insights:closing markers with the lede for the page's readers (the map's audience: business owners,
   private clients, or both on the hub and the guides for both). The only call in a page's body, so the page ends as
   the homepage ends: paper, the deep call, the ink floor. No CSS of its own. */

/* 12. THE CURRENT PAGE IN THE CHROME. sync_chrome.py marks a link aria-current="page" when it is this page and
   aria-current="true" when this page sits under it (Insights on every article). site.css draws the first; the second
   gets the same mark, so the nav still says where you are without telling a screen reader the article is the hub. */
.site-head .nav .links a[aria-current="true"],.nav-panel-links a[aria-current="true"]{text-decoration-line:underline;
  text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:.3em}
.site-foot .foot-list a[aria-current="true"]{color:var(--fg);text-decoration-color:currentColor}

/* 13. PRINT. Accountants print guides. site.css already prints every ground as ink on paper and drops the nav, the
   buttons and the closing links; here the article prints in one column with nothing held in place, the head loses
   the nav's clearance, read next, the call, the breadcrumb trail and the question marks are left out, every answer
   prints, and steps, table rows and notes stay whole on a page. The head keeps no padding: on paper there is no
   ground change to space. (A portrait page is narrower than 960px, so the phone layout applies by itself; the
   one-column rules below also cover a wide landscape page. Tables keep their own layout either way.) */
@media print{
  .ph,.ph:has(.crumbs){padding-block:0}
  .ar-sec,.steps>li{grid-template-rows:none}
  .ar-h{display:block}
  .ar-h>span{position:static}
  .ar-h,.ar-text,.ar-side,.step-name,.step-text,.step-go{grid-column:1/-1;grid-row:auto;align-self:auto}
  .ar-text{margin-top:16px}
  .step-text{margin-top:12px}
  .ar-side{max-width:none}
  .crumbs,.rn,.s-co,.faq-mark{display:none}
  .faq-a[hidden]{display:block!important;content-visibility:visible!important}
  .steps>li,.dt tr,.note{break-inside:avoid}
}
/* a printed answer that was closed on screen keeps the stacked 12px under its question (the screen rule above drops
   it only so a closed row stays even) */
@media print and (max-width:959px){.faq-a[hidden]{margin-top:12px}}

/* The questions intro on the hub sets balanced, so no word sits alone on a line. */
.faq>.wrap>.t-lede{text-wrap:balance}