/* =========================================================================== page.css - the prose document, and the marketing cluster it shares Loaded by Page.aspx (About, Privacy, Terms, Contact, FAQ), by NotFound.aspx, and by Default.aspx alongside home.css. WHAT THIS FILE COLLAPSES, and it is the whole reason it exists. The first edition presentation inventory names two duplicate clusters that this one file replaces: 4. Legal/prose cluster: About.aspx, Contact.aspx, FAQ.aspx, Privacy.aspx and Terms.aspx each declared the SAME document shape inline, under three different wrapper names (.legal, .about, .faq), plus one copy of hr.rule apiece. FIVE copies of one layout. 3. Marketing/CTA cluster: .btn, .btn.pri, .btn.pri:hover and .eyebrow declared inline in SEVEN pages, of which Default.aspx and NotFound.aspx are the two this workstream ports. The appearance is unchanged. Every value below is the first edition value; only the number of places it is written has changed. Where two of the five prose pages differed, the union is taken and named once, which is why .quote (About), .callout (Privacy, Terms, FAQ), .part (Terms) and the tables (FAQ) are all here under one wrapper. ONE WRAPPER NAME, .legal, WHERE THE FIRST EDITION HAD THREE. .about and .faq were byte-identical to .legal for every rule they shared and differed only by adding rules of their own; renaming them to one class is mechanism, and the rendered page is pixel-identical. The additions all survive here, unscoped to a page, because a pull quote and a callout are useful on any of these documents and gating them by which page they happened to appear on first is how the first edition ended up with three of everything. HAZARD 7 IN THE INVENTORY: Default.aspx and NotFound.aspx declared BARE .btn / .eyebrow / .hero / .stat / .tile, which collide with site.css's own. Everything here is namespaced under a page root: .legal for the documents, .homepage and .notfoundpage for the two marketing surfaces. =========================================================================== */ /* --------------------------------------------------------------------------- THE DOCUMENT Prose capped at the shared reading measure, sitting on the canvas rather than in a panel, exactly like the entity pages' lede. The .sechd headings are inherited from site.css, which is why the wrapper sits inside .dvpage. --------------------------------------------------------------------------- */ .legal{max-width:var(--measure);margin:0 auto;padding:26px 20px 20px} /* --------------------------------------------------------------------------- THE BOOK PAGES' BREADCRUMB, ALIGNED TO THE PROSE BENEATH IT Owner, 2026-08-03: "the breadcrumb trail should start within the bounds of the narrowed pages. Currently it is top left on a narrow page and it looks off. The position is correct for wide page view but not narrow shaped ones like books." WHY IT HAPPENS. The trail has to live OUTSIDE the [data-read] element or js/panel-speak.js speaks it before the chapter, so BookDocument.Crumb emits it as a sibling of the reading container, directly inside .wrap. That makes it full width, while the prose is inside .legal at the centred measure. On a wide screen the trail starts at the far left and the text starts halfway in. THE FIX IS THIS RULE AND NOT THE MARKUP ORDER. Moving the trail inside .legal would align it and put it straight back into the read-aloud. IT MIRRORS .legal ABOVE, TERM FOR TERM, and that is what makes the alignment exact rather than close: same max-width from the same variable, same 20px sides, same margin:0 auto. site.css:280 sets *{box-sizing:border-box}, so the max-width is the OUTER width and the 20px sits inside it; both boxes resolve to the same outer width, centre identically, and the equal padding puts their first characters on the same line. **Do not "tidy" this by restating 40.5rem or by giving either box a box-sizing of its own: the pair stays aligned only while the two are declared the same way.** MEASURED IN THE BROWSER, 2026-08-03, not reasoned about. On a 1280px window the breadcrumb, the kicker, the h1 and the lede all report a left edge of 199.375px and the two boxes the same 911.25px outer width. VERTICAL. padding-top:26px matches .legal's, so the trail sits the same distance below the chrome that prose would. dvrail's own 20px bottom margin and the crumbline's 11px are both zeroed here, leaving .dvpage's 10px and .legal's 26px, which measures 39px from the trail to the kicker. NARROW SCREENS need nothing extra: below the measure both boxes stop being width-limited and fill .wrap identically, so they stay aligned, and the trail picks up the same 20px inset as the prose where it used to sit 18px further left. Every length here is either the shared rem variable or the same px padding .legal uses, so the two track each other at any text size; checked at 100%, at 200%, and at the 150% the owner actually browses at. SCOPED TO .bookrail. Bare .dvrail belongs to the entity pages, where full width is correct. --------------------------------------------------------------------------- */ .dvrail.bookrail{max-width:var(--measure);margin:0 auto;padding:26px 20px 0} .dvrail.bookrail .crumbline{margin-bottom:0} .legal .kick{color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-size:.68rem;font-weight:600} /* text-wrap:balance REMOVED here, w-launchfix1-2148, 2026-08-23 (launch readiness audit item 14; full reasoning in App_Themes\Divinity\home.css at its own .homepage .fcard h4 rule, ruling 309 prevalence sweep). This is the exact rule the audit named: the Terms and Privacy pages' own heading. */ /* SELECTOR RESTORED TO h1 AND MADE CLASS-BASED, w-launchfix3-2241, 2026-08-23 (board 1793/1812 reversal): see site.css's .dvrail .page for the full reasoning. Page.aspx (Terms, Privacy and every other content.Page) keeps its own topic heading as h1, class="page". */ .legal .page{font-family:var(--serif);font-size:2.05rem;margin:6px 0 10px;font-weight:600;line-height:1.15} .legal .lede{color:var(--muted);font-size:1.02rem;line-height:1.7;margin:0 0 6px} .legal .stamp{color:var(--faint);font-size:.8rem;margin:14px 0 0} /* The byline is a second .stamp sitting directly under the subtitle, so it takes a tight top margin rather than the 14px that separates the pair from the title above them. In em, so the gap holds its proportion under A+. */ .legal .stamp.byline{margin-top:.3em} .legal p{line-height:1.72;margin:0 0 13px;color:var(--ink)} .legal ul{margin:0 0 15px;padding-left:20px} .legal li{line-height:1.66;margin:0 0 7px} .legal li b,.legal li strong{font-weight:650} /* :not(.btn), added later. This rule is the prose link colour for .legal's body text (About, the FAQ, Books, chapters) and predates any .legal page ever holding a real button: at (0,1,1) it beats site.css's bare .btn{color:#1a1508} at (0,1,0), so an born under .legal (ReportItems.aspx's detail view, the first of its kind here) rendered with this rule's gold-soft text instead of the canonical button's own dark ink, on top of the canonical button's own gold fill -- read live as "orange with white text instead of black" (owner, 2026-08-07). The button was never repainted and carries no bespoke colour rule of its own; the fix is here; site.css's one .btn stays the only place button colour is stated. */ .legal a:not(.btn){color:var(--gold-soft)} /* .dochead IS THE 404 HEADING ONLY, SINCE 2026-08-02. A prose document's title row is PageActions.Head now: the owner ruled that every page on the platform renders the SAME action bar, and this page family had a read control and no way to copy or share its own address. Page.aspx.vb's NotFound still emits a .dochead, which is why these rules stay; the [data-speak-host] rules below them no longer match anything and are kept for the argument they carry, which is the one thing that change traded away. The first edition put the page's speak/copy/share controls in a .dvhead grid level with the heading line; here the one control that existed in this edition, the read-aloud panel-speak.js injects, sat in the same place. A flex row rather than a grid because there is one control and it is pushed right by the .dspeak margin-left:auto that already exists in chrome.css. align-items:baseline, and min-width:0 on the heading, so a long title wraps instead of squeezing the button off the row at 200% text. */ .legal .dochead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} /* SELECTOR RESTORED TO h1 AND MADE CLASS-BASED, w-launchfix3-2241, 2026-08-23 (board 1793/1812 reversal): every "Not Found" fragment using .dochead (Book, Chapter, Page) keeps its own heading as h1, class="page". */ .legal .dochead .page{min-width:0;flex:1 1 16ch} /* DEAD SINCE 2026-08-02 AND KEPT FOR THE ARGUMENT, WHICH IS STILL LIVE. No .dochead carries a [data-speak-host] any more, so nothing below matches. The read control on a prose page is now the shared bar's, which site.css draws (in the block beside [data-pageacts] .readbtn) as a full-opacity bordered box the size of every other control in the row, with its label on title and aria-label but NOT on screen. That is a real trade and it is the only thing the owner's same-bar-everywhere ruling cost this page family: a consistent position on all 57 prose pages, bought with the visible word on the one page family that had it. If the owner wants the label back, the honest fix is to give it back on EVERY page from that one block rather than re-forking this surface. The rules used to live in App_Themes/Divinity/pageacts.css, which was folded into site.css and deleted on 2026-08-02; the box was also 2.5em then and is --actbtn now, one token shared with the star, the bell, copy and share, so all six move together under A-/A+ instead of one of them moving alone. The reasoning that made the case, kept verbatim: */ /* THE PAGE READ-ALOUD IS A LABELLED CONTROL HERE, NOT A DULLED ICON, and both halves of that are accessibility decisions rather than style ones. js/panel-speak.js injects the button into the [data-speak-host] span, and chrome.css styles .dspeak as a 30px circle at opacity .55, because there it is one of dozens of per-panel controls that stay quiet until their row is hovered. Here it is the ONLY control on the page, the owner uses read-aloud daily, and a 55%-opacity 30px target that reveals itself on hover is exactly the interaction central-field vision loss handles worst. It is also the one host panel-speak fills WITH ITS TEXT LABEL (a .dspeak-t span), which chrome.css does not style at all because no first edition surface used it. Sized here in em and padded in em so the whole control grows with the reader's text size, and allowed to wrap: .dochead is flex-wrap, so at 200% the button drops to its own line under the heading instead of being squeezed or clipped. No white-space:nowrap anywhere near it. */ .legal .dochead [data-speak-host]{margin-left:auto;display:inline-flex;min-width:0} .legal .dochead .dspeak{opacity:1;width:auto;height:auto;min-height:2.4em;gap:.5em; padding:.45em .8em;border-radius:10px;background:var(--panel);border-color:var(--edge2); color:var(--ink);font:inherit;font-size:.86rem;font-weight:600;margin-left:0} .legal .dochead .dspeak:hover,.legal .dochead .dspeak.on{border-color:var(--gold);color:var(--gold);background:var(--panel2)} .legal .dochead .dspeak svg{flex:0 0 auto} /* THE SECTION WRAPPERS ARE INVISIBLE ON PURPOSE. Every block is a section.sec.oncanvas, because js/panel-speak.js walks a document by .sec and a block outside one is a block a listener never hears. .oncanvas already strips the card in site.css (background, border, radius, padding); these two rules restore the exact first edition spacing, which .dvpage .sec and .dvpage .sec>h2 would otherwise overwrite: .dvpage .sec.oncanvas sets margin:0 0 8px -> the blocks want none .dvpage .sec>h2 sets margin:0 0 12px -> at (0,2,1) it beats .dvpage .sechd at (0,2,0), so the heading loses its 26px of air above it Both values below are lifted from site.css's own .dvpage .sechd rule. */ .legal .sec.oncanvas{margin:0} .legal .sec>h2.sechd{margin:26px 2px 11px;padding:0} .legal .sec:first-of-type>h2.sechd{margin-top:14px} /* The one-line summary that opens a section or answers a question, so a reader who wants the short version can get it from the first line and stop there. */ .legal .short{color:var(--gold-soft);font-size:.95rem;margin:0 0 11px;font-style:italic} /* Contents. Two columns on the desktop measure, one on a phone. */ .legal .toc{margin:20px 0 8px;padding:0;list-style:none;columns:2;column-gap:26px} .legal .toc li{margin:0 0 6px;break-inside:avoid} .legal .toc a{color:var(--muted);text-decoration:none;font-size:.9rem} .legal .toc a:hover{color:var(--gold);text-decoration:underline} .legal .toc .tocpart{color:var(--faint);text-transform:uppercase;letter-spacing:.12em; font-size:.68rem;font-weight:600;margin:10px 0 4px;break-inside:avoid} .legal .toc .tocpart:first-child{margin-top:0} @media(max-width:560px){ .legal .toc{columns:1} } /* The PART headings, which outrank the section headings under them. Sized in rem so they scale with the reader's text control, and given room above rather than a rule, so the document reads as three movements rather than three documents. */ .legal .part{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--gold); margin:38px 0 4px;line-height:1.2} .legal .partnote{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 18px} /* A callout: a paragraph the document does not want skimmed past. */ .legal .callout{background:var(--panel);border:1px solid var(--edge);border-left:2px solid var(--gold); border-radius:10px;padding:14px 16px;margin:0 0 16px} .legal .callout p:last-child{margin-bottom:0} /* A quotation FROM the atlas, so it takes the gold edge the callouts use and is set in the serif: a reader should be able to see at a glance that these are the database's own words rather than this page vouching for itself. */ .legal .quote{background:var(--panel);border:1px solid var(--edge);border-left:2px solid var(--gold); border-radius:10px;padding:14px 16px;margin:0 0 16px} .legal .quote p{font-family:var(--serif);font-size:1.02rem;line-height:1.68;margin:0 0 9px} .legal .quote p:last-child{margin-bottom:0} .legal .quote .cite{font-family:var(--sans);font-style:normal;color:var(--faint);font-size:.8rem;display:block;margin-top:9px} .legal .quote .cite a{color:var(--faint)} /* The warning variant. The advice disclaimer and the statement of limits are the two blocks on this site that must not be skimmed past, so they are the only ones keyed to the warning colour rather than the gold. */ .legal .warn{border-left-color:var(--dark-c)} .legal .quote.warn p{font-family:var(--sans);font-size:.97rem} /* A photograph inside a prose page, w2200-aboutshelf. The image never overflows the measure it sits in, and the caption reuses the same muted tone .stamp and .lede already use rather than inventing a new one. Sized in em so the frame scales with the reader's own text control instead of staying a fixed box while the words around it grow. */ .legal .pagefig{margin:0 0 16px} .legal .pagefig img{display:block;width:100%;max-width:100%;height:auto; border:1px solid var(--edge);border-radius:10px} .legal .pagefig figcaption{color:var(--muted);font-size:.85rem;line-height:1.5; margin:.6em 2px 0} /* Counts quoted inside the prose. Tabular figures so the digits line up and the eye can compare them. */ .legal .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:10px;margin:4px 0 20px} .legal .fig{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:12px 13px} .legal .fig b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--gold-soft); font-weight:600;font-variant-numeric:tabular-nums} .legal .fig span{display:block;color:var(--muted);font-size:.82rem;line-height:1.4;margin-top:2px} .legal .figs .wide{grid-column:1/-1} /* A FIGURE THE ATLAS DOES NOT HOLD, rendered by App_Code ProseTokens. The seeded prose was written for the first edition and quotes figures this edition cannot count: it has no article corpus, content.Source has no reliability tier, and there is no religion classification vocabulary. Those tokens render the words "not yet counted" rather than a zero, because a zero in a sentence is a claim. It is marked quietly and NOT hidden, and never as a tooltip: the owner uses read-aloud and increased text size daily, and a caveat that only exists on hover is a caveat they never receive. Dotted underline in currentColor, so it carries at any contrast setting. */ .legal .statgap{color:var(--muted);font-style:italic; border-bottom:1px dotted currentColor} /* A table inside prose. Scrolls inside its own box rather than widening the page: html{overflow-x:hidden} is never used on this site, so an overwide block would otherwise push a horizontal scrollbar onto the whole document. */ .legal .tblwrap{overflow-x:auto;margin:0 0 16px} .legal table{border-collapse:collapse;width:100%;font-size:.92rem} .legal th,.legal td{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--edge);vertical-align:top} .legal th{color:var(--gold-soft);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em} .legal td.n{font-variant-numeric:tabular-nums;white-space:nowrap} /* The divider. Bare in the first edition, namespaced here so it cannot reach an hr anywhere else on the site. */ .legal hr.rule{border:0;border-top:1px solid var(--edge);margin:30px 0} /* --------------------------------------------------------------------------- THE MARKETING CLUSTER One copy, three selectors. The first edition declared this in seven pages; Default.aspx, NotFound.aspx and Error.aspx are the three ported here, and every root class is listed on each rule rather than the cluster being copied per page. Every value is the first edition value. --------------------------------------------------------------------------- */ .homepage .eyebrow,.notfoundpage .eyebrow,.errorpage .eyebrow{color:var(--gold);text-transform:uppercase; letter-spacing:.22em;font-size:.7rem;font-weight:600;margin-bottom:16px} /* The first edition's Error.aspx inline copy of the cluster carried 14px here where every other copy carries 16px; the divergence is kept, because ruling 112 keys on what the eye sees, not on what the stylesheet would prefer. */ .errorpage .eyebrow{margin-bottom:14px} .homepage .btn,.notfoundpage .btn,.errorpage .btn{border-radius:11px;padding:11px 20px;font:inherit;font-size:.92rem; font-weight:600;text-decoration:none;cursor:pointer;border:1px solid var(--edge2); background:var(--panel);color:var(--ink);transition:.16s;display:inline-flex;align-items:center;gap:8px} .homepage .btn:hover,.notfoundpage .btn:hover,.errorpage .btn:hover{border-color:var(--gold);transform:translateY(-1px)} .homepage .btn.pri,.notfoundpage .btn.pri,.errorpage .btn.pri{background:var(--gold);color:#1a1508;border-color:var(--gold)} .homepage .btn.pri:hover,.notfoundpage .btn.pri:hover,.errorpage .btn.pri:hover{background:var(--gold-soft)} .homepage .btn:focus-visible,.notfoundpage .btn:focus-visible,.errorpage .btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .homepage .herocta,.notfoundpage .herocta,.errorpage .herocta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap} /* --------------------------------------------------------------------------- NOT FOUND The first edition card, unchanged, inside the shared .authwrap that site.css already provides. ONE STRUCTURAL FIX, and it is not a design change: the first edition markup is
nested inside the master's own
. Two
elements in one document is invalid, and a screen reader offered two main landmarks cannot tell a reader which is the page. It is a div here and renders identically. --------------------------------------------------------------------------- */ .notfoundpage .card,.errorpage .card{max-width:560px;width:100%;text-align:center; background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge); border-radius:18px;padding:44px 34px;box-shadow:var(--shadow)} .notfoundpage .card .mark,.errorpage .card .mark{width:52px;height:52px;margin:0 auto 20px;display:block} .notfoundpage .code{font-family:var(--serif);font-size:3.4rem;line-height:1;font-weight:600; color:var(--gold-soft);font-variant-numeric:tabular-nums;margin-bottom:6px} /* text-wrap:balance REMOVED here, w-launchfix1-2148, 2026-08-23 (launch readiness audit item 14; full reasoning in App_Themes\Divinity\home.css at its own .homepage .fcard h4 rule, ruling 309 prevalence sweep). */ /* SELECTOR RESTORED TO h1 AND MADE CLASS-BASED, w-launchfix3-2241, 2026-08-23 (board 1793/1812 reversal): NotFound.aspx and Error.aspx both keep their own heading as h1, class="page". */ .notfoundpage .page,.errorpage .page{font-family:var(--serif);font-size:2rem;line-height:1.12;margin:0 0 14px; font-weight:600} .notfoundpage p,.errorpage p{color:var(--muted);max-width:46ch;margin:0 auto 26px;font-size:1rem} /* opacity:.6 removed here 2026-08-20 (owner request 993 follow-up): composited over the card's own background it measured 3.3:1 in dark and 2.4:1 in light, both under the 4.5:1 floor, which is exactly what the owner reported as small and faint. Color alone, still var(--muted) at .78rem, keeps the whisper register while clearing the floor everywhere: 6.7 to 7.4:1 in dark, 5.0 to 5.6:1 in light, measured against both ends of the card's own gradient. */ .notfoundpage .quietnote{color:var(--muted);font-size:.78rem;margin:28px auto 0;max-width:46ch;text-align:center} /* Error.aspx (ported 2026-08-02) shares the card above minus the .code figure: the first edition's branded 500 page never showed a status number. Its inline sheet is otherwise this cluster, hoisted, with the one 14px eyebrow divergence noted at the cluster head. */ /* --------------------------------------------------------------------------- THE TWO DERIVED BLOCKS .idx a collection index: one line per page in the collection, the page's own title as the link and its own meta description under it. .cites the entities a page cites, each with the note saying why. Both are ordinary lists rather than chip rows, and that is deliberate rather than plain. A chip row is a horizontal scan, which is the weakest reading for someone with central-field loss and the weakest listening order too: a read-aloud pass over a chip row is a run of names with no structure between them. Name, then reason, on its own line reads correctly in both, and it wraps rather than clipping. Everything is in rem and em against the reader's own text size, and nothing here is a fixed-height box around text, so the A-/A+ control keeps working at 200%. .idxd, .citesub and .citenote are display:block so a long note wraps under its name rather than pushing the row wide; .legal already sits inside the shared reading measure. .idxdate, w2199-newslist: the plain-words publish date on a news-list member, sized and coloured like .citesub (a faint small caption under the headline) but WITHOUT its uppercase transform, since a date read in caps is not how the site's own .stamp date elsewhere on a page reads. No other existing class fits: .idxd is the description line and already used for the teaser on the same row, and .stamp is a full-width paragraph, not an inline caption inside a list item. --------------------------------------------------------------------------- */ .legal .idx,.legal .cites{list-style:none;margin:0 0 15px;padding:0} .legal .idx li,.legal .cites li{margin:0 0 14px;padding:0 0 0 .9em;border-left:2px solid var(--edge);line-height:1.6} .legal .idx li a,.legal .cites li a{font-weight:600;text-decoration:none} .legal .idx li a:hover,.legal .cites li a:hover{text-decoration:underline} .legal .idx li a:focus-visible,.legal .cites li a:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .legal .idxd,.legal .citenote{display:block;color:var(--muted);font-size:.92em;line-height:1.6;margin-top:.15em} .legal .citesub{display:block;color:var(--faint);font-size:.82em;letter-spacing:.04em;text-transform:uppercase;margin-top:.1em} .legal .idxdate{display:block;color:var(--faint);font-size:.82em;margin-top:.1em} /* --------------------------------------------------------------------------- THE CHAPTER PAGER (owner-approved) The previous and next controls at the foot of a book chapter, rendered by App_Code/View/BookDocument.vb. This is the ONE visual decision on the book reader that was escalated to the owner rather than ported: they were shown the plain .idx list links these replace and chose real controls, sized as touch targets, each NAMING the chapter it goes to. THE SIZE IS THE POINT AND IT IS NOT A STYLE CHOICE. For a reader with central-field loss, a small target is their weakest interaction, and this is the control they use twelve times per read-through. EVERYTHING IS IN em, SO THE TARGET GROWS WITH THE TEXT. The padding, the gap, the radius and both type sizes are em against the reader's own size, and there is no height, no line-clamp and no fixed px box anywhere in here: a fixed box would opt this control out of the A-/A+ control, which is the one thing it must never do. IT WRAPS, IT NEVER TRUNCATES. flex:1 1 15em with min-width:0 and no white-space:nowrap, so a long chapter title takes a second line, the pair stacks on a phone or at 200% text, and nothing becomes three characters and an ellipsis. One-sided is the ordinary case at either end of a book: the surviving step simply grows to the full width, and nothing draws an empty box or a disabled control. Colours, radius and panel treatment are the .callout / .fig idiom already in this file, so nothing here is a new look. --------------------------------------------------------------------------- */ .legal .chapnav{display:flex;flex-wrap:wrap;gap:.7em;margin:0 0 15px} .legal .chapnav .chapstep{flex:1 1 15em;min-width:0;display:block; padding:.85em 1em;background:var(--panel);border:1px solid var(--edge); border-radius:10px;color:var(--ink);text-decoration:none;line-height:1.5} .legal .chapnav .chapstep:hover{background:var(--panel2);border-color:var(--gold)} .legal .chapnav .chapstep:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .legal .chapnav .chapstep.next{text-align:right} .legal .chapnav .chapdir{display:block;color:var(--gold);font-size:.74em;font-weight:600; letter-spacing:.1em;text-transform:uppercase} .legal .chapnav .chapttl{display:block;font-family:var(--serif);font-size:1.06em; font-weight:600;margin-top:.2em} /* THE BONUS MARK: a circle that does not close, whose end carries on past where it should have met itself (owner's choice, 2026-08-03). It rides on .chapdir, which is .74em, so 1.5em here is about 1.1em of the step's own text: large enough that the tail reads as a tail rather than a nick at a phone's base size, and small enough to sit inside the direction line as punctuation. EVERY VALUE IS em, DELIBERATELY. The A- / A+ control multiplies the root size, so a px box here would opt the glyph out of the one control the owner uses most; at 200% text it grows with the words around it. It inherits colour through stroke="currentColor", so it is the same gold as the line it sits on in both themes and no colour is declared here at all. It is aria-hidden in the markup: the meaning is entirely in the words beside it, and nothing about the pager depends on it being seen. */ .legal .chapnav .chapbon{display:inline-block;width:1.5em;height:1.5em; vertical-align:-.45em;margin-left:.35em} /* Stacked, so the right edge is no longer an edge to hug: both steps read from the same margin as the prose above them. */ @media(max-width:560px){ .legal .chapnav .chapstep,.legal .chapnav .chapstep.next{text-align:left} } /* --------------------------------------------------------------------------- THE CHAPTER DOCUMENT A long chapter is not split across pages: it gets a section index at the top and a read-aloud control on every section, just like the other pages. BookDocument. ChapterDocument emits the markup; js/panel-speak.js injects every control. .chapdoc IS A SCOPE, NOT A LOOK. It rides beside .legal on the chapter reader alone, because everything below reaches .toc and .sechd, which the fifty findings pages share and which the layout-parity rule says nobody redesigns. Not one rule here changes a colour, a face or a type size. What they change is the SIZE OF A TARGET, which is the accommodation this whole change is for: a reader with central-field loss, a chapter now carries a dozen read controls and a dozen index links, and every one of them is something they have to find and hit. THE READ CONTROL IS THE SHARED ICON AND STAYS ONE. Nothing here gives it a visible label; its words travel in title and aria-label, and panel-speak names each one after its own section ("Read Zero Aloud"), so a screen reader announces which section a control belongs to rather than a dozen buttons with the same name. WHAT chrome.css DOES THAT HAS TO BE UNDONE HERE, and it is the same undoing site.css already does for the page action row: chrome.css draws a .dspeak as a fixed 30px circle at 55% opacity that only comes up to full on hover. That is right for the inline hosts it was written for (a fact panel, a Learn-more summary) and wrong for a reading surface, on two counts. A fixed px box opts the control out of the A-/A+ control, which the project's accessibility rules forbid outright. And a control dulled until hover is a control a reader with central-field loss cannot find at all, and cannot reveal on a touch screen where there is no hover. Specificity, not load order, is what makes these win: .chapdoc .sechd .dspeak is (0,3,0) against chrome.css's (0,1,0). --------------------------------------------------------------------------- */ /* The heading becomes the row that holds the control. .chaphd takes min-width:0 so a long heading wraps inside the row instead of pushing the control off it. align-items:center is site.css's own value for every other .sechd flex row (details.sec>summary.sechd, and Compare's div.sechd), so a wrapped heading here behaves exactly as a wrapped one does there. .ridoc: ReportItems.aspx's detail view (ridoc, set on its own
alongside .legal, same idiom as .chapdoc above and for the same reason -- a named SCOPE, not a widening of .chapdoc itself onto a page it was never meant to reach). The owner asked for the same per-section speak control the book chapters carry; the markup contract and the rule below are identical, just keyed on the second scope class so no other .legal page (About, the FAQ, the other findings pages) is touched by this. */ .chapdoc .sec>h2.sechd,.ridoc .sec>h2.sechd{display:flex;align-items:center;gap:.5em} .chapdoc .sec>h2.sechd>.chaphd,.ridoc .sec>h2.sechd>.chaphd{min-width:0;flex:1 1 auto} .chapdoc .sec>h2.sechd>.speakhost,.ridoc .sec>h2.sechd>.speakhost{flex:0 0 auto;margin-left:auto;display:inline-flex} /* font:inherit is what makes the em below mean anything: a button carries the browser's own small font otherwise, so the box would size against that and not against the reader's text. Same reason site.css gives for the action row. */ .chapdoc .sechd .dspeak,.ridoc .sechd .dspeak{font:inherit;opacity:1;width:2.2em;height:2.2em; color:var(--muted);border-color:var(--edge2)} .chapdoc .sechd .dspeak svg,.ridoc .sechd .dspeak svg{width:1.1em;height:1.1em} .chapdoc .sechd .dspeak:hover,.chapdoc .sechd .dspeak:focus-visible,.chapdoc .sechd .dspeak.on, .ridoc .sechd .dspeak:hover,.ridoc .sechd .dspeak:focus-visible,.ridoc .sechd .dspeak.on{ opacity:1;color:var(--gold);border-color:var(--gold);background:var(--panel2)} /* The index. Same list, same colours, same two columns as every other contents list on the site; the links are block-level so the target is the width of the column and a whole line tall rather than the words alone. Nothing here is sized in px, so the rows grow with the text. */ .chapdoc .chapindex{margin:0} .chapdoc .chapindex .toc a{display:block;padding:.45em 0} @media (prefers-reduced-motion: reduce){ /* 0.01ms rather than none, matching site.css, so transitionend still fires. */ .legal *,.homepage *,.notfoundpage *,.errorpage *{transition-duration:.01ms !important} }