/* Axi Growth reading pages: the sector sheets, the library, Insights, the Findability Check, Privacy, Thanks and 404.
   Loads after home.css and products.css, which supply the tokens, the frame, the masthead, the blue hero with its crumb and lead,
   the .two layout, the side list, the close and the footer. This file adds what a page of prose needs and the shop pages do not.
   The body carries class "reading" too, so the section rules are written as section.reading. */

/* ---------- The body of a reading page: one measure of text on paper ---------- */
section.reading { padding: 72px 0 96px; }
.reading .two > .head { grid-column: 1 / span 4; position: sticky; top: calc(var(--head) + var(--frame) + 32px); }
.reading .two > .body { grid-column: 5 / span 8; border-top: 1.5px solid var(--ink); padding-top: 24px; }
.reading .two > .body > .pieces:first-child { border-top: 0; margin-top: -20px; }
.reading .two > .head .cap { margin: 0; padding: 10px 0 9px; font-size: 14px; font-weight: 500; color: var(--ink-3); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); max-width: none; }
.reading .two > .head > p:first-child { margin-top: 0; }
.reading .head .all { margin: 18px 0 0; font-size: 14px; font-weight: 500; }

/* A heading placed straight in the body column, over a list of documents: the size of a prose h2, the list's own rule beneath it */
.reading .body > h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 18px; scroll-margin-top: 8px; }
.reading .body > .pieces + h2 { margin-top: 56px; }

/* The rules run the width of the column, as the rule at the top of it does; the text keeps to a measure */
.prose { max-width: none; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose small, .prose .note, .prose .sample { max-width: 58ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.06; letter-spacing: -0.01em; padding-top: 28px; margin-top: 40px; border-top: 1.5px solid var(--ink); scroll-margin-top: 8px; text-wrap: balance; }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.05; margin-top: 32px; }
.prose h2 + h3 { margin-top: 20px; }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul, .prose h2 + ol, .prose h3 + ol { margin-top: 14px; }
.prose p { color: var(--ink-2); text-wrap: pretty; }
.prose p.lead { color: var(--ink); font-size: 19px; line-height: 1.45; }
/* A dated line under a piece's heading, then its standfirst */
.prose h2 + .note { margin-top: 10px; }
.prose .note + .lead { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 22px; color: var(--ink-2); }
.prose li { margin-top: 6px; padding-left: 4px; text-wrap: pretty; }
.prose li::marker { color: var(--ink-3); font-weight: 500; }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; color: var(--ink); transition: color 0.2s; }
.prose a:hover { color: var(--red); }
.prose .btn, .prose .btn:hover { color: var(--white); text-decoration: none; }
.prose small, .prose .note { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }
.prose blockquote { margin: 20px 0 0; padding-left: 20px; border-left: 1.5px solid var(--ink); color: var(--ink-2); }

/* A table inside the prose: light rules, the first column as the key */
.prose table { margin-top: 18px; font-size: 15px; line-height: 1.45; }
.prose th, .prose td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.prose thead th { font-size: 13px; font-weight: 500; color: var(--ink-3); padding-top: 0; }
.prose tbody th { font-weight: 500; color: var(--ink); width: 30%; }
.prose td { color: var(--ink-2); }
.prose td:last-child, .prose th:last-child { padding-right: 0; }
/* A wide table scrolls sideways on a narrow screen instead of pushing the page; its caption line sits under it */
.prose .tscroll { margin-top: 18px; overflow-x: auto; }
.prose .tscroll table { margin-top: 0; }
.prose .tscroll + .note { margin-top: 8px; }
/* The terms in one line under the close button on a page that sells nothing itself */
#order .say p.act + .terms-line { margin-top: 12px; font-size: 15px; }
/* The sector close names the price in two lines of up to twenty characters, one size down from the product closes so neither line breaks */
#order h2.sector { font-size: clamp(40px, 5.6vw, 84px); }

/* Numbered steps: the number in the margin, the way the parts list counts */
.steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.steps li:first-child { border-top: 1.5px solid var(--ink); }
.steps li::before { counter-increment: step; content: counter(step); position: static; font-family: var(--text); font-weight: 500; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ink-3); }
.steps p, .steps blockquote { grid-column: 2; }
.steps b { display: block; font-weight: 600; color: var(--ink); }
.steps p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.steps blockquote { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
.steps blockquote p { margin: 0; }
/* Inside the prose the list keeps its own margin and indent, and a list that hands over to a heading leaves the rule to the heading */
.prose .steps, .prose .pieces { padding-left: 0; max-width: none; }
.prose h2 + .steps, .prose h3 + .steps { margin-top: 18px; }
.prose .pieces h3 { margin-top: 0; }
.steps:has(+ h2) li:last-child { border-bottom: 0; }
/* A document that counts across its groups: the checklist runs 1 to 25 through seven lists */
.prose.numbered { counter-reset: step; }
.prose.numbered .steps { counter-reset: none; }

/* A sample of a report or an email, set as the document it stands for */
.sample { margin-top: 18px; padding: 22px 24px; border: 1.5px solid var(--ink); background: var(--white); font-size: 14.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; font-family: var(--text); overflow-x: auto; }
.sample b { font-weight: 600; }
.sample + .note { margin-top: 12px; }
/* A table inside a sample: a plain two-column list at its natural width, no rules, in the sample's own type */
.sample table { white-space: normal; width: auto; margin: 0.7em 0 1em; font-size: inherit; line-height: inherit; }
.sample th, .sample td { padding: 2px 32px 2px 0; border: 0; vertical-align: baseline; }
.sample tbody th { width: auto; font-weight: inherit; color: inherit; }
.sample td { color: var(--ink-2); padding-right: 0; }

/* A form on paper: the same fields as the order form, in the reading measure */
.pform { display: grid; gap: 16px; max-width: 520px; }
.pform label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.pform input:not([type=hidden]):not([type=radio]):not([type=checkbox]), .pform textarea, .pform select { width: 100%; background: var(--white); border: 1.5px solid var(--ink); color: var(--ink); padding: 0 12px; font: 16px var(--text); border-radius: 0; }
.pform input:not([type=hidden]):not([type=radio]):not([type=checkbox]), .pform select { height: 48px; }
.pform textarea { min-height: 96px; padding: 12px; resize: vertical; line-height: 1.45; }
.pform input::placeholder, .pform textarea::placeholder { color: var(--ink-3); opacity: 1; }
.pform input:focus-visible, .pform textarea:focus-visible, .pform select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pform input[aria-invalid="true"]:not([type=hidden]):not([type=radio]):not([type=checkbox]), .pform textarea[aria-invalid="true"], .pform select[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.pform .err { display: block; font-size: 13px; line-height: 1.4; color: var(--red); margin-top: 6px; }
.pform .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 4px; }
.pform .note { font-size: 14px; line-height: 1.45; color: var(--ink-3); max-width: 40ch; }
.pform .form-error { color: var(--red); font-size: 14.5px; margin: 0; }
.pform .form-error a { color: var(--ink); }
.pform .ok { display: none; }
.pform.sent > *:not(.ok) { display: none; }
.pform.sent .ok { display: block; }
/* The form in the sticky column: its own lines are not column notes */
.reading .two > .head .cap + .pform { margin-top: 18px; }
/* The Findability Check: the form is the page, so it takes the heading and the wider column and the explanation sits beside it */
#check .two > .head { grid-column: 1 / span 5; }
#check .two > .body { grid-column: 7 / span 6; }
#check .two > .head .cap { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 0.95; letter-spacing: -0.01em; color: var(--ink); border-top: 0; border-bottom: 0; padding: 0; }
#check .two > .head .cap + .pform { margin-top: 22px; padding-top: 22px; border-top: 1.5px solid var(--ink); }
#check .pform { max-width: none; }
#check .pform .acts { flex-direction: column; align-items: stretch; gap: 12px; }
#check .pform .acts .btn { width: 100%; justify-content: center; }
#check .pform .note { max-width: none; }
.reading .two > .head .pform p { margin-top: 0; max-width: none; }
.reading .two > .head .pform .form-error { color: var(--red); }
.reading .two > .head .pform .ok .lead { color: var(--ink); }
.reading .two > .head .pform .ok .body-p { margin-top: 12px; }

/* A list of articles or documents: title, one line, and what it costs or when it was written */
.pieces { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); counter-reset: piece; }
.pieces li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 4px; padding: 20px 0 20px 46px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.pieces li::before { counter-increment: piece; content: counter(piece); position: absolute; left: 0; top: 24px; font-family: var(--text); font-weight: 500; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ink-3); }
.pieces h3, .pieces h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.05; grid-column: 1; }
.pieces h3 a, .pieces h2 a { display: inline-block; padding: 7px 0; margin: -7px 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--rule); transition: color 0.2s, text-decoration-color 0.2s; }
.pieces h3 a:hover, .pieces h2 a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.pieces .p { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pieces p { grid-column: 1 / span 2; margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
/* A short ruled list of links, for the other sectors at the foot of a sector page */
.pieces.small li { padding: 12px 0 12px 46px; }
.pieces.small li::before { top: 15px; }
.pieces.small h3 { font-family: var(--text); font-weight: 500; font-size: 16px; line-height: 1.4; }
.pieces.small h3 a { text-decoration-color: var(--rule); }

/* Beneath a long document: what it cost and the way to buy it */
.buyline { margin-top: 48px; padding-top: 28px; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; row-gap: 16px; align-items: start; }
.buyline .price { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; }
.buyline .price small { display: block; font-family: var(--text); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink-3); margin-top: 8px; letter-spacing: 0; }
.buyline p { grid-column: 1; margin: 0; color: var(--ink-2); max-width: 58ch; }
.buyline .btn { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

/* ---------- Narrow screens and short windows ---------- */
@media (min-width: 1101px) and (max-height: 660px) {
  .reading .two > .head { position: static; }
}
@media (max-width: 1100px) {
  .reading .two > .head, #check .two > .head { grid-column: 1 / span 12; position: static; }
  .reading .two > .body, #check .two > .body { grid-column: 1 / span 12; }
}
@media (max-width: 900px) {
  section.reading { padding: 56px 0 72px; }
  .reading .body > .pieces + h2 { margin-top: 44px; }
  .prose h2 { margin-top: 32px; padding-top: 22px; }
  .steps li { grid-template-columns: 36px minmax(0, 1fr); }
  .pieces li { grid-template-columns: 1fr; padding-left: 34px; }
  .pieces.small li { padding-left: 34px; }
  /* The side list two-up, so the contents take half a screen rather than a screen and a half */
  .reading .two > .head .side ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .reading .two > .head .side a, .reading .two > .head .side li > .n { padding: 8px 0; }
  .reading .two > .head .side .n { font-size: 14px; }
  .reading .two > .head .side .p { font-size: 13px; }
  .pieces .p { grid-column: 1; grid-row: auto; white-space: normal; }
  .pieces p { grid-column: 1; }
  .buyline { grid-template-columns: 1fr; }
  .buyline .btn { grid-column: 1; grid-row: auto; }
  .sample { padding: 16px; font-size: 14px; }
  .sample th { padding-right: 20px; }
}