/* Reading pages (about, privacy, terms, the app's privacy notice, journal posts): one layout for prose that carries a fact
   or a disclosure, so nothing here is reworded to fit. Wide screens: a held title column on the left with the contents list,
   the chapters on the right. The same grid as how.html, without that page's choreography: these pages are read, not watched.
   Added 29 Oct 2026 (go-live round 13). Loaded after d.css; it uses d.css's tokens and surfaces and sets nothing global. */
.rd { padding: 120px 0 0; }
.rd .grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .rd .grid { grid-template-columns: 4fr 8fr; gap: 64px clamp(48px, 6vw, 120px); align-items: start; } .rd .intro { position: sticky; top: 108px; } }
.rd .kicker { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 14px; }
.rd h1 { font-size: clamp(36px, 4.6vw, 72px); letter-spacing: -0.04em; }
.rd .lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; margin-top: 18px; text-wrap: pretty; max-width: 46ch; }
.rd .toc { list-style: none; margin: 28px 0 0; padding: 0; display: none; }
@media (min-width: 1024px) { .rd .toc { display: grid; gap: 2px; } }
.rd .toc a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); font-weight: 500; border-left: 2px solid var(--line); padding-left: 14px; transition: color var(--dur-fast), border-color var(--dur-fast); }
.rd .toc a:hover, .rd .toc a[aria-current="true"] { color: var(--ink); border-color: var(--accent); }
/* The chapters: 17 px body on a 62 ch measure, two sentences to a paragraph as the source holds them. */
.rd .chapters { font-size: 17px; line-height: 1.6; }
.rd .chapters > p, .rd .chapters > ul { max-width: 62ch; }
.rd .chapters > p + p, .rd section p + p, .rd section ul + p, .rd section p + ul, .rd .fold > div > p + p, .rd .fold > div > p + ul, .rd .fold > div > ul + p { margin-top: 14px; }
.rd section { scroll-margin-top: 96px; }
.rd section + section, .rd .fold + section, .rd section + .fold, .rd .fold + .fold, .rd .chapters > p + section, .rd .chapters > ul + section { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.rd h2 { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 18px; max-width: 24ch; }
.rd h3 { font-size: 19px; letter-spacing: -0.015em; margin: 28px 0 10px; }
.rd section p, .rd .fold p, .rd section ul, .rd .fold ul { max-width: 62ch; }
.rd ul { margin: 0; padding-left: 22px; }
.rd li + li { margin-top: 8px; }
.rd li::marker { color: var(--muted); }
.rd a { font-weight: 500; }
.rd p a, .rd li a { text-decoration-color: var(--edge); }
.rd p a:hover, .rd li a:hover { text-decoration-color: var(--accent); }
.rd strong { font-weight: 600; }
/* A fold: a section that opens on request (Jordan, 13 Oct 2026: "Just too much to read"). The heading is the whole 56 px
   row; the chevron turns when open. Not a word inside is different from an open section. */
.rd .fold { scroll-margin-top: 96px; }
.rd .fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.rd .fold > summary::-webkit-details-marker { display: none; }
.rd .fold > summary h2 { margin: 0; }
.rd .fold > summary .chev { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast); }
.rd .fold > summary .chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd .fold > summary:hover .chev { background: var(--wash); }
.rd .fold[open] > summary .chev { transform: rotate(180deg); }
.rd .fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.rd .fold > div { padding-top: 14px; }
/* The opening row on About: the four things a reader came for, each a link to its chapter. */
.rd .four { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .rd .four { grid-template-columns: repeat(2, 1fr); } }
.rd .four li { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); border-radius: var(--r-tile); padding: 18px; display: grid; gap: 8px; align-content: start; }
.rd .four b { font: 600 18px/1.2 var(--display); letter-spacing: -0.02em; }
.rd .four p { color: var(--muted); font-size: 15px; }
.rd .four a { font-weight: 500; }
.rd .act { margin-top: 24px; }
/* About only (.has-four): the title and the four run the full width above the chapters, and the held column keeps the
   contents list alone (29 Oct 2026, round 13). Two-up inside the 4fr column the cards ran tall and pushed the contents
   below the fold. Each card's title links to its chapter, and the whole card is the target. */
.rd .has-four { row-gap: 28px; }
.rd .has-four .four, .rd .has-four .act { margin-top: 0; }
.rd .has-four .chapters { margin-top: 12px; }
.rd .four li { position: relative; transition: box-shadow var(--dur-fast); }
.rd .four li + li { margin-top: 0; }
.rd .four li a { color: var(--ink); text-decoration: none; }
.rd .four li a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.rd .four li:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.rd .four li:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.rd .four li a:focus-visible { outline: none; }
@media (min-width: 1024px) {
  .rd .has-four { row-gap: 36px; }
  .rd .has-four .head, .rd .has-four .four { grid-column: 1 / -1; }
  .rd .has-four h1 { max-width: 22ch; text-wrap: balance; }
  .rd .has-four .four { grid-template-columns: repeat(4, 1fr); margin-bottom: 28px; }
  .rd .has-four .toc { margin-top: 0; }
  .rd .has-four .act { margin-top: 24px; }
  .rd .has-four .chapters { margin-top: 0; }
}
/* The end of the page: the correction line, as on every reading page. */
.rd .fix { margin-top: 48px; color: var(--muted); font-size: 15px; }
.rd .fix a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; color: var(--ink); }
.rd .foot-gap { height: var(--sec); }
@media (max-width: 600px) { .rd { padding-top: 100px; } .rd h2 { font-size: 26px; } .rd .chapters { font-size: 16px; } }
/* Rise once on arrival (d.js B.reveals, class rv). Nothing is hidden without it. */
html.rv-on .rd .rv:not(.in) { opacity: 0; transform: translateY(14px); }
.rd .rv { transition: opacity 520ms var(--ease-out), transform 600ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { html.rv-on .rd .rv:not(.in) { opacity: 1; transform: none; } }
/* For properties (/claim, round 13, 29 Oct 2026): the right of reply and two enquiry forms on the reading layout. An
   Operate page: the held column says what happens in three steps; the chapters are the forms. One primary per form. */
.claimpg h1 { font-size: clamp(34px, 3.6vw, 56px); }
.rd .steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: none; }
.rd .steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.rd .steps .n { font-size: 14px; font-weight: 600; color: var(--accent); }
.rd .steps b { display: block; color: var(--ink); font-weight: 600; }
.rd .risk { margin-top: 16px; color: var(--muted); }
.rd .risk a { color: var(--ink); display: inline-flex; min-height: 44px; align-items: center; }
@media (min-width: 1024px) { .claimpg .act { display: none; } .claimpg .risk { margin-top: 24px; } }
.rd section > .kicker { margin-bottom: 8px; }
/* Fields: one family. 52 px controls on the page's own surface, a 3:1 edge, a 2 px accent ring on focus, the danger
   ring and a message under the field on error. Labels sit over their control; optional is said, required is not. */
/* The error colour reads on both grounds: d.css's --danger (4.96 on the night paper, 5.58 on ember's) on light, a
   lighter red (7.14 on the no-paper surface) on dark, chosen by the surface's own color-scheme. */
.rd { --err: var(--danger); --err: light-dark(var(--danger), #FF8F85); }
.rd .fld { display: grid; gap: 8px; max-width: 520px; position: relative; }
.rd .fld > span { font-weight: 600; font-size: 15px; }
.rd .fld .opt { font-weight: 400; color: var(--muted); }
.rd .fld input, .rd .fld textarea, .rd .fld select { width: 100%; min-height: 52px; border: 0; border-radius: var(--r-small); padding: 12px 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
.rd .fld textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.rd .fld select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; text-overflow: ellipsis; }
.rd .fld:has(select)::after { content: ''; position: absolute; right: 20px; bottom: 22px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.rd .fld :is(input, textarea, select):focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.rd .fld :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
.rd [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--err) !important; }
.rd .err { color: var(--err); font-size: 14px; font-weight: 600; margin-top: -6px; }
.rd .fform { display: grid; gap: 18px; margin-top: 24px; max-width: 520px; }
.rd .tick { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; min-height: 44px; padding-top: 10px; cursor: pointer; }
.rd .tick input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--action); cursor: pointer; }
.rd .tick input[aria-invalid="true"] { outline: 2px solid var(--err); outline-offset: 2px; box-shadow: none !important; }
.rd .fine { color: var(--muted); font-size: 14px; line-height: 1.5; }
.rd .fine a { color: var(--ink); }
.rd .alert:empty { display: none; }
.rd .alert { color: var(--err); font-weight: 600; }
.rd .done { margin-top: 24px; max-width: 520px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); border-radius: var(--r-tile); padding: 20px; display: grid; gap: 8px; }
.rd .done[hidden], .rd .fform[hidden] { display: none; }
.rd .done h3 { margin: 0; outline: none; }
.rd .done .ref { color: var(--muted); font-size: 14px; }
/* The chosen listing: its coverage line, the questions for its thin pathways, and the two ways to send. No score. */
.rd .claim { margin-top: 24px; display: grid; gap: 20px; }
.rd #claim-out:empty { display: none; }
.rd #claim-out { display: grid; gap: 16px; }
.rd #claim-out .muted { color: var(--muted); }
.rd .gaps { list-style: none; padding: 0; display: grid; gap: 12px; }
.rd .gaps > li { margin: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-tile); padding: 16px 18px; }
.rd .gaps > li > p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rd .gaps .v { font-size: 14px; color: var(--muted); }
.rd .gaps ul { margin-top: 10px; font-size: 16px; }
.rd .gaps ul li + li { margin-top: 6px; }
.rd .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* The fold inside a section (other ways to send it): a plain disclosure, 44 px. */
.rd .more { margin-top: 20px; max-width: 62ch; }
.rd .more > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 4px; }
.rd .more > p { margin-top: 10px; }
/* Both disclosure statements travel with the number wherever a score prints (components/site.tsx DisclosureNotice). */
.rd .disc { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; gap: 12px; color: var(--muted); font-size: 15px; max-width: 62ch; }
.rd .disc strong { color: var(--ink); }