... 75-125 words ...
THE HUMANS ARE FINE.
span in the Story B Evidence File
pushed the 390px document to 433px. Wrap-only; no visual change on desktop. */
.article-body code,
.evidence-table code,
.hfc code {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Plain-text long tokens get the same treatment. Batch 001 final gate: the
Story B Evidence File prints bare DOI/arXiv URLs as paragraph text, not as
or , so the rule above never applied to them. One such URL held
the 375px document at 377px (2px). break-word wraps only tokens that would
otherwise overflow, so ordinary prose is unaffected. */
.article-body p,
.article-body li,
.article-body dd {
overflow-wrap: break-word;
}
/* Verbatim machine output (one block, in the Vos Evidence File). A default
keeps white-space:pre, so its longest line set a 404px min-content width and the
320px and 375px documents scrolled sideways by 84px and 29px. Wrapped rather
than scrolled: the lines are short command output, so nothing is lost, and the
block still scrolls internally if a line ever exceeds the column. */
.code-block{
margin:0 0 18px;padding:14px 16px;background:var(--panel);
border:1px solid var(--line);border-left:3px solid var(--green);
overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;
}
.code-block code{
font:12px/1.6 var(--mono);color:var(--muted);
background:none;border:0;padding:0;
}
.clarification{margin:40px 0 0;padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber)}
.clarification .clarification-title{margin:0 0 10px;color:var(--amber);font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.clarification p{margin:0;color:var(--muted);font:15.5px/1.65 var(--sans)}
@media (max-width:800px){.clarification{padding:18px 16px}.clarification p{font-size:15px}}
/* --- breadcrumb trail (added Release 2 / audience build) -------------------
A reader landing from a search result should be able to see where they are
and step up to the topic archive in one tap. Matching BreadcrumbList markup
is emitted by scripts/thaf-apply-metadata.ps1 from this same visible trail. */
.crumbs{
font:600 12px/1.5 var(--thaf-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
letter-spacing:.06em;
text-transform:uppercase;
color:#6b6b6b;
margin:18px 0 6px;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.5em;
}
.crumbs a{color:#6b6b6b;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.crumbs a:hover,.crumbs a:focus-visible{color:#111;border-bottom-color:currentColor}
.crumbs [aria-current="page"]{color:#111;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(100%,34ch)}
@media (max-width:560px){
.crumbs{font-size:11px;letter-spacing:.04em}
.crumbs [aria-current="page"]{max-width:100%;white-space:normal}
}
@media (prefers-color-scheme:dark){
.crumbs,.crumbs a{color:#9a9a9a}
.crumbs a:hover,.crumbs a:focus-visible,.crumbs [aria-current="page"]{color:#fff}
}
/* thaf:ai-disclosure - body-level authorship disclosure.
Palette falls back to the site :root values so the block stays on-brand
whether or not the custom properties are in scope on this stylesheet. */
.ai-disclosure{
margin:2rem 0 0;
padding:1rem 1.15rem;
border:1px solid var(--line,#46535a);
border-left:3px solid var(--amber,#e8be7a);
background:var(--panel,#121a20);
font-size:.95rem;
line-height:1.6;
}
.ai-disclosure p{margin:0}
.ai-disclosure strong{color:var(--ink,#f5f3ea)}
.ai-disclosure a{color:inherit;text-decoration:underline}
.ai-disclosure a:hover,.ai-disclosure a:focus-visible{text-decoration-thickness:2px}
@media (max-width:560px){
.ai-disclosure{padding:.85rem .9rem;font-size:.92rem;margin-top:1.5rem}
}
/* ============================================================
READER EXPERIENCE (Day Shift 6)
A single responsive headline treatment, applied by length tier
rather than per-article correction. scripts/thaf-reader-experience.ps1
sets .h1-lg (13-19 words) or .h1-xl (20+ words) on the article
from the headline's own word count, so a new article inherits the
treatment without anyone editing this file again.
Tiers, in the order a reader sees them:
default (1-12 words) 58px desktop / 30px phone
.h1-lg (13-19 words) 52px desktop / 27px phone
.h1-xl (20+ words) 46px desktop / 25px phone
Long headlines give up size and gain line spacing, so they stop
filling the viewport while staying typographically calm.
============================================================ */
.article h1{line-height:1.06;text-wrap:pretty}
.article h1.h1-lg{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.035em}
.article h1.h1-xl{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.03em}
@media(max-width:420px){
.article h1.h1-lg{font-size:27px;line-height:1.1}
.article h1.h1-xl{font-size:25px;line-height:1.12}
}
/* Related coverage sits between the newsroom block and the footer nav.
It had no styling, so the h2 fell back to the browser default (22.5px bold)
and read as a different publication from the rest of the page. */
.related-title{margin:44px 0 12px;font:400 clamp(22px,3vw,30px)/1.15 var(--sans);letter-spacing:-.02em}
/* Share row: plain outbound links, no scripts, no tracking pixels. */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:30px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.share-label{color:var(--muted);font:10px var(--mono);letter-spacing:.08em}
.share-row a{display:inline-flex;align-items:center;min-height:26px;color:var(--green);font:10px var(--mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.share-row a:hover,.share-row a:focus-visible{color:#d7f0dc;border-bottom-color:currentColor}
/* Breadcrumb contrast. #6b6b6b on #0b1014 measured 3.59:1 — below the 4.5:1
AA floor for 11-12px text. Worse, [aria-current="page"] was #111, which on
this background measured about 1.05:1: the current page name was invisible
for every reader whose OS was not in dark mode. Both are fixed here, and the
dark-mode block is reconciled so the two modes agree instead of diverging. */
.crumbs,.crumbs a{color:#93a0a7}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--ink);border-bottom-color:currentColor}
.crumbs [aria-current="page"]{color:var(--ink)}
@media (prefers-color-scheme:dark){
.crumbs,.crumbs a{color:#93a0a7}
.crumbs a:hover,.crumbs a:focus-visible,.crumbs [aria-current="page"]{color:var(--ink)}
}
/* Day Shift 8: what the FOR HUMAN CONSUMPTION block is, and is not. */
.hfc .hfc-note{
margin:0 0 1rem;
font-size:.82rem;
letter-spacing:.02em;
text-transform:none;
color:var(--muted, #6b6b6b);
border-left:3px solid var(--amber, #d99a2b);
padding-left:.7rem;
}