nested inside a link (e.g. book / paper titles) should inherit the
link color; the `p em` color rule at the top of the stylesheet would
otherwise repaint italic link text in body-text brown. */
a em, a.paper em { color: inherit; }
/* The reference marker (.lk-mk), shared by paper links and cross-reference
links so the cue reads as one system.
It is a real in the markup, sitting immediately AFTER , and that
placement is the whole point. As a `::after` inside the link it was an
inline-block, i.e. an atomic inline, and the line breaker is free to break
before one of those whatever precedes it, so the triangle kept wrapping onto
a line of its own (14 of 321 column widths, measured). Two touching runs of
ordinary text have no break opportunity between them, so as a sibling span
it cannot be separated (0 of 321). Note a no-break space in front of the old
inline-block did NOT fix it: nothing glues an atomic inline.
Outside the for a second reason: text inside a link takes the link's
underline and cannot refuse it, so an inside-the-link fix drags the
underline under the triangle. Out here the underline still stops at the last
letter, which is the look we want.
Adding a new marked link? Add the span too; there is no CSS that can
generate content outside an element. Same reason numbered labels carry
`Part III`, `Section 17`, `Appendix D`: a reference and its
number are one unit. */
.lk-mk {
margin-left: 4px;
color: var(--accent);
font-size: 0.78em;
vertical-align: 1px;
font-weight: 600;
pointer-events: none;
user-select: none;
}
/* The marker sits outside the anchor, so without this the hover target would
stop at the last letter and drifting onto the triangle would close the
preview card. The negative margin cancels the padding, so advance width and
line breaking are unchanged; inline padding is not underlined, so the
underline still ends at the text. */
a.paper, a.reflink { padding-right: 11px; margin-right: -11px; }
a.paper .paper-card {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 340px;
max-width: 80vw;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 14px 16px;
font-family: var(--sans);
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 1.5;
color: var(--text-2);
z-index: 35;
box-shadow: 0 8px 28px rgba(44, 36, 22, 0.15);
text-decoration: none;
pointer-events: none;
cursor: default;
}
a.paper:hover .paper-card { display: block; }
.paper-card .pc-title {
display: block;
font-family: var(--serif-display);
font-style: italic;
font-size: 14.5px;
font-weight: 500;
color: var(--text);
margin-bottom: 4px;
line-height: 1.35;
}
.paper-card .pc-authors {
display: block;
font-size: 11px;
color: var(--muted);
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.paper-card .pc-abstract {
display: block;
font-size: 12px;
color: var(--text-2);
}
/* Reference cards (section / part / diagram cross-refs): same on-demand overlay
chrome as a.paper .paper-card, different innards. Desktop reveal on hover. */
a.reflink { position: relative; }
a.reflink .ref-card {
display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 300px; max-width: 80vw;
background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 13px 15px;
font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 1.5;
color: var(--text-2); z-index: 35; box-shadow: 0 8px 28px rgba(44,36,22,0.15);
text-decoration: none; pointer-events: none; cursor: default; text-align: left; white-space: normal;
}
a.reflink.card-flip .ref-card { left: auto; right: 0; }
a.reflink:hover .ref-card, a.reflink:focus-visible .ref-card { display: block; }
@media (hover: none) { a.reflink .ref-card { display: none !important; } }
.ref-card .hc-secrow { display: flex; gap: 11px; align-items: center; }
.ref-card .hc-cart { width: 60px; height: 60px; flex: none; border-radius: 5px; object-fit: cover; opacity: .92; background: rgba(44,36,22,.05); }
.ref-card .hc-secmain { display: block; min-width: 0; }
.ref-card .hc-eyebrow { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--accent-strong); font-weight: 600; letter-spacing: .03em; margin-bottom: 3px; }
.ref-card .hc-title { display: block; font-family: var(--serif-display); font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 3px; line-height: 1.25; }
.ref-card .hc-q { display: block; font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--muted); line-height: 1.4; }
.ref-card .q-part { font-family: var(--mono); font-size: 9.5px; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-strong); }
.ref-card .hc-dlabel { display: block; font-family: var(--serif-display); font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.ref-card .hc-thumb-img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); }
/* #21 Prediction cards ------------------------------------------------------ */
.predictions {
display: grid;
gap: 14px;
margin: 22px 0;
}
.the-bet {
background: color-mix(in srgb, var(--accent) 4%, transparent);
border-left: 3px solid var(--accent);
padding: 18px 24px;
margin: 2em 0;
border-radius: 4px;
}
.the-bet li strong, .the-bet p strong { color: var(--text); font-weight: 700; }
.why-now-list li strong { color: var(--text); font-weight: 700; }
ul li strong { color: var(--text); font-weight: 700; }
.the-bet p { font-size: 16.5px !important; line-height: 1.7 !important; }
.the-bet li { font-size: 16.5px !important; line-height: 1.65 !important; }
.the-bet ol, .the-bet ul { font-size: 16.5px !important; }
/* Objection cards (S23) ----------------------------------------------------- */
/* §24 objections: a deep-brass serif "NN." numeral (h3 tint) runs straight into
the bold claim, print-numbered-list style; then setup + RESPONSE run-in.
Chosen via case-against-styles-playground.html ("Numbered Claim"). */
.obj-index {
font-weight: 700;
color: var(--accent-strong);
margin-right: 0.45em;
font-variant-numeric: lining-nums;
}
.obj-claim { margin: 2em 0 0.5em; }
.obj-setup { margin: 0 0 0.8em; }
.obj-resp-label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-right: 8px;
}
/* #24 Citation tiers in references ------------------------------------------ */
/* Appendix disclosure panels (Sat's pick from the appendix-headings
playground, 20-08-2026): the visual-frame-adjacent look, chosen with the
figure-idiom overlap flagged. Web+mobile only: the PDF deliberately takes
the editorial h3 treatment instead (pdf/make-spike-excerpt.py,
.pdf-details/.pdf-summary), because these blocks are taller than a page and
a frame would have to split across breaks. The open-state gap comes from
the existing 12px inner wrapper div, so the summary itself needs no [open]
margin. */
.apx-panel {
margin: 1.2em 0;
border: 1px solid rgba(44, 36, 22, 0.16);
background: rgba(184, 134, 11, 0.045);
border-radius: 5px;
padding: 14px 18px;
}
.apx-panel,
.apx-panel > summary {
/* mobile: kill the grey tap-highlight flash on toggle (keyboard focus
outline untouched) */
-webkit-tap-highlight-color: transparent;
}
.apx-panel > summary {
cursor: pointer;
font-family: var(--sans);
font-weight: 600;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-strong);
padding: 2px 0;
}
@media (max-width: 640px) {
.apx-panel { padding: 12px 14px; }
}
/* Appendix D's group headings live inside its panel: compact (20px -> 16px)
so they subordinate to the smallcaps summary. !important because the
<=760px readability pass sets .essay h3 to 18.5px !important. */
.essay .apx-panel h3 { font-size: 16px !important; margin: 20px 0 8px; }
.ref-tier {
margin-bottom: 24px;
}
.ref-tier .rt-label {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted); /* stepped down from brass so the panel title above it wins (20-08-2026) */
font-weight: 600;
margin-bottom: 8px;
}
.ref-tier ul {
margin: 0;
padding-left: 22px;
}
.ref-tier ul li {
margin-bottom: 5px;
font-size: 15px;
line-height: 1.55;
}
/* #25 Version history footer ------------------------------------------------ */
.version-history {
margin: 40px 0 0;
padding: 22px 26px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--sans);
}
.version-history .vh-title {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
font-weight: 600;
margin-bottom: 14px;
}
.version-history .vh-entry {
font-size: 13px;
color: var(--text-2);
line-height: 1.55;
padding: 7px 0;
border-bottom: 1px solid var(--line);
}
.version-history .vh-entry:last-child { border-bottom: none; }
.version-history .vh-date {
font-family: var(--mono);
color: var(--accent);
font-weight: 600;
margin-right: 10px;
}
/* N2 Last-updated indicator ------------------------------------------------- */
.last-updated {
display: inline-block;
font-family: var(--sans);
font-size: 12px;
color: var(--muted);
margin: 0;
letter-spacing: 0.02em;
}
.last-updated::before { content: "\00B7"; margin: 0 8px; color: var(--dim); }
.last-updated .lu-tag { margin-right: 4px; }
.last-updated a {
color: var(--muted);
text-decoration: underline;
text-decoration-color: rgba(123, 107, 88, 0.4);
}
/* #27b Opening definition entry (white card, below masthead) ---------------- */
.essay-header { margin-bottom: 26px; } /* was 40px; tightened for the definition card */
#exec-summary { margin-top: 26px; } /* h2 default is 50px; the card carries its own rhythm */
.opening-def {
background: linear-gradient(rgba(184, 134, 11, 0.03), rgba(184, 134, 11, 0.03)), #FFFFFF;
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px 19px;
box-shadow: 0 3px 8px rgba(44, 36, 22, 0.06);
margin: 0 0 6px;
}
.opening-def .od-head { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.opening-def .od-head .od-hw { font-family: var(--serif-display); font-style: italic; font-size: 19px; color: var(--text); }
.opening-def .od-head .od-ipa { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-left: 0.5em; }
.opening-def .od-head .od-pos { font-family: var(--serif-display); font-style: italic; font-size: 15px; color: var(--muted); margin-left: 0.35em; }
.opening-def .od-lead { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 0 0 6px; }
.opening-def .od-dom { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 0 0 6px; }
.opening-def .od-lin { color: var(--accent-strong); white-space: nowrap; }
.opening-def p:last-child { margin-bottom: 0; }
.opening-def .od-turn { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 12px 0 0; }
.pl-term { font-family: var(--serif-display); font-style: italic; color: var(--accent-strong); font-size: 16px; /* optical match: EB Garamond runs small */ }
@media (max-width: 760px) {
/* the mobile h2 rule uses !important margins; match it so the card keeps its rhythm */
#exec-summary { margin-top: 30px !important; }
}
.last-updated a:hover { color: var(--accent); }
/* Tweet treatment: stripped back to SA / AI 2027 register.
The prose introduces the source ("From a May 2024 tweet:"), the link is a
normal link, the quote is italic because it is a quote. No glyphs, no
handle labels, no brass chrome. Citations are citations, regardless of
platform; the argument is what matters, not the platform metadata.
Classes .tweet-link / .tweet-anchor are left in the HTML as no-ops in
case future styling decisions want them back. */
.tweet-quote {
font-style: italic;
}
/* Toast for clipboard-copy feedback ----------------------------------------- */
.toast {
position: fixed;
top: 28px;
left: 50%;
transform: translate(-50%, -10px);
background: var(--accent);
color: #0e0e0e;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
padding: 9px 18px;
border-radius: 6px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
z-index: 200;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
/* ============================================================================
Chapter plates + inline image figures (v3 final ship)
Six chapter plates between movement ranges; three inline image figures.
Voyage Bridge palette holds.
============================================================================ */
.chapter-plate {
margin: 64px calc(-1 * var(--page-pad, 24px)) 44px;
padding: 26px 0 28px;
border-top: 1px solid rgba(184, 134, 11, 0.45);
border-bottom: 1px solid rgba(184, 134, 11, 0.45);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.chapter-plate .plate-num {
font-family: var(--sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--accent);
font-weight: 700;
margin-bottom: 8px;
}
.chapter-plate .plate-title {
font-family: var(--serif-display);
font-size: 38px;
font-style: italic;
color: var(--text);
line-height: 1;
margin: 0 0 6px;
font-weight: 500;
letter-spacing: -0.005em;
}
.chapter-plate .plate-sub {
font-family: var(--serif);
font-size: 14px;
font-style: italic;
color: var(--muted);
max-width: 420px;
margin: 0 auto;
line-height: 1.5;
}
.chapter-plate .plate-img {
max-width: 140px;
width: 100%;
height: auto;
margin: 0 auto 22px;
display: block;
border-radius: 3px;
opacity: 0.92;
order: -1;
}
/* inline image figure (uses .visual-frame structure, just with an ![]()
) */
.visual-frame .essay-img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.field-notes-marker .fn-label {
font-family: var(--sans);
text-transform: uppercase;
letter-spacing: 0.26em;
font-size: 10.5px;
color: var(--accent);
font-weight: 700;
margin-bottom: 4px;
}
.field-notes-marker .fn-title {
font-family: var(--serif-display);
font-style: italic;
font-size: 22px;
color: var(--muted);
}
/* ===== Predictions appendix (scoped to #p2r) ===== */
#p2r{--hit:#5f7d4f;--partial:var(--accent);--open:#8a8073;--missed:var(--red)}
#p2r .p2r-lead{font-size:17px;margin:14px 0 16px}
/* figure frame — same visual language as the essay's .visual-frame figures */
#p2r .vf{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:20px 18px 12px;margin:14px 0 4px}
#p2r .vf-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
#p2r .vis-label{font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:600}
#p2r .pillseg{display:inline-flex;background:rgba(44,36,22,.055);border-radius:999px;padding:3px}
#p2r .pillseg button{font-family:var(--sans);font-size:11.5px;font-weight:600;border:0;background:transparent;color:var(--muted);padding:4px 13px;border-radius:999px;cursor:pointer;transition:all .12s}
#p2r .pillseg button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(44,36,22,.14)}
#p2r .chartbox.hide{display:none}
#p2r .cap{font-family:var(--sans);font-size:12.5px;color:var(--muted);text-align:center;margin:6px 8px 2px}
#p2r .chartbox svg{display:block;width:100%;height:auto;font-family:var(--sans)}
#p2r .node{cursor:pointer;transition:transform .12s ease;transform-box:fill-box;transform-origin:center}
#p2r .lane{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispedges}
#p2r .axis{stroke:rgba(44,36,22,.14);vector-effect:non-scaling-stroke;shape-rendering:crispedges}
#p2r .axis-txt{fill:var(--muted);font-size:11.5px;font-family:var(--mono);opacity:.85}
#p2r .ax-title{fill:var(--muted);font-size:9.5px;font-weight:600;letter-spacing:.14em;font-family:var(--sans);opacity:.8}
#p2r .lane-txt{fill:var(--text);font-size:12px;font-weight:600;font-family:var(--sans)}
#p2r .node.hot{transform:scale(1.55)}
#p2r .node.dim{opacity:.28}
/* Entrance runs on wrapper groups (.p2r-el frame/lanes, .p2r-dot per dot), never on
.node itself, so the hover hot/dim cascade keeps working after the classes strip. */
@media (prefers-reduced-motion: no-preference){
#p2r svg.p2r-armed .p2r-el,#p2r svg.p2r-armed .p2r-dot{opacity:0}
#p2r svg.p2r-armed .p2r-dot{transform:scale(.3);transform-box:fill-box;transform-origin:center}
#p2r svg.p2r-armed.p2r-in .p2r-el{opacity:1;transition:opacity .55s ease var(--d,0s)}
#p2r svg.p2r-armed.p2r-in .p2r-dot{opacity:1;transform:scale(1);transition:opacity .45s ease var(--d,0s),transform .45s cubic-bezier(0.34,1.56,0.64,1) var(--d,0s)}
}
/* PDF: the view toggle is meaningless on paper, and the observer never fires there,
so force every entrance element visible. */
@media print{
#p2r .pillseg{display:none}
#p2r svg .p2r-el,#p2r svg .p2r-dot{opacity:1!important;transform:none!important}
}
#p2r .grp{font-family:var(--serif-display);font-size:20px;font-weight:600;letter-spacing:-.005em;margin:32px 0 12px;color:var(--accent-strong)}
/* year-spine prediction rows */
#p2r .sp-group{margin:0 0 4px}
/* The wash is the row's only highlight, so it needs air on both sides: with padding:0 the
confidence figure sat exactly on its right edge and the band read as clipped. Padding +
equal negative margin bleeds the paint outward and leaves every child pixel-identical. */
#p2r .bet{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;padding:8px 12px;margin:0 -12px;position:relative;border-radius:6px;transition:background .12s}
#p2r .rmeta{display:flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap;margin-left:12px}
#p2r .yhead{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text);letter-spacing:.02em;margin:26px 0 8px;display:flex;align-items:center;gap:10px}
#p2r .yhead:first-child{margin-top:26px}
#p2r .yhead::after{content:"";flex:1;height:1px;background:var(--line)}
#p2r .ptag{display:inline-flex;align-items:center;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;padding:2px 8px;border-radius:999px;background:transparent;border:1.4px solid;vertical-align:middle;margin:0}
#p2r .bet.hot{background:rgba(74,107,138,.08)}
#p2r .bet.flash{animation:p2rflash 1.6s ease}
@keyframes p2rflash{0%,35%{background:rgba(184,134,11,.18)}100%{background:transparent}}
#p2r .sp-node{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch}
#p2r .sp-node::before{content:"";position:absolute;top:-8px;bottom:-8px;left:50%;width:1px;background:rgba(44,36,22,.18)}
#p2r .sp-group .bet:first-child .sp-node::before{top:50%}
#p2r .sp-group .bet:last-child .sp-node::before{bottom:50%}
#p2r .sp-node svg{position:relative;z-index:1;width:13px;height:13px;background:var(--bg);border-radius:50%}
#p2r .sp-claim{font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--text-2);line-height:1.45;padding-left:10px}
#p2r .sp-conf{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
#p2rtip{position:fixed;z-index:60;pointer-events:none;display:none;opacity:0;transition:opacity .1s;max-width:280px;background:var(--text);color:#f4ede1;border-radius:6px;padding:10px 12px;font-family:var(--sans);font-size:12.5px;box-shadow:0 6px 22px rgba(0,0,0,.22)}
#p2rtip .tt-claim{font-family:var(--serif);font-size:13.5px;line-height:1.4;margin-bottom:6px;color:#fff}
#p2rtip .tt-row{display:flex;gap:8px;align-items:center;color:#d8cdbb;font-size:11.5px;margin-top:3px}
#p2rtip .tt-row .g{width:9px;height:9px;border-radius:50%}
@media (max-width:640px){
#p2r .vf{padding:14px 10px 8px}
#p2r .vf-head{gap:8px}
#p2r .chartbox{overflow-x:auto;-webkit-overflow-scrolling:touch}
#p2r .bet{grid-template-columns:20px minmax(0,1fr) auto;padding:8px 10px;margin:0 -10px}
#p2r .sp-claim{font-size:13.5px}
}
/* ===== Appendix D interactive modality matrix (#dmatrix) ===== */
#dmatrix{margin:2px 0 0}
#dmatrix .dm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
#dmatrix table{width:100%;border-collapse:collapse;font-family:var(--sans)}
#dmatrix th,#dmatrix td{padding:6px 7px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
#dmatrix th{font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap;user-select:none}
#dmatrix th:first-child{cursor:default}
#dmatrix th.sorted{color:var(--accent)}
#dmatrix th.num,#dmatrix td.num{text-align:center}
#dmatrix td.dm-name{font-family:var(--serif);font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--text)}
#dmatrix tbody tr{transition:background .1s}
/* Row highlight. Touch has no hover and iOS leaves a tap stuck in it, so .dm-hot is the
only source of truth there (same reasoning as the .acronym:not(.tip-open):hover rule).
Gating this is not cosmetic: iOS applies :hover on the first tap and, if that paints
anything, WITHHOLDS the click so the reader can see the hover state. One ungated rule
here cost the first tap on every row and every column header. Confirmed 18-08-2026.
The .dm-name pair keeps the pinned column opaque under a highlight: --accent-soft is
translucent and outranks the sticky rule below, so without it the row's own score bars
slid visibly under its name as you swiped. Compositing the wash over an opaque base
beats hardcoding the blend, and needs no width guard: above 720px the cell has no
background of its own and sits on the same var(--bg-2) frame, so it renders identically. */
@media (hover:hover){
#dmatrix tbody tr:hover td{background:var(--accent-soft)}
#dmatrix tbody tr:hover td.dm-name{
background-color:var(--bg-2);
background-image:linear-gradient(var(--accent-soft),var(--accent-soft))}
}
#dmatrix tbody tr.dm-hot td{background:var(--accent-soft)}
#dmatrix tbody tr.dm-hot td.dm-name{
background-color:var(--bg-2);
background-image:linear-gradient(var(--accent-soft),var(--accent-soft))}
#dmatrix .dm-track{display:inline-flex;align-items:center;width:39px;height:9px;border-radius:5px;background:rgba(44,36,22,.08);vertical-align:middle;overflow:hidden}
#dmatrix .dm-bar{display:inline-block;height:9px;border-radius:5px;vertical-align:middle}
#dmatrix .dm-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
#dmatrix th .dm-caret{margin-left:3px;font-size:9px;opacity:.3;transition:opacity .15s}
@media (hover:hover){#dmatrix th.num:hover{color:var(--accent)}#dmatrix th.num:hover .dm-caret{opacity:.7}}
#dmatrix th.sorted .dm-caret{opacity:1}
/* watermark: this figure is an HTML table, not an SVG, so it cannot carry the
in-viewBox text the chart figures use. Sits as a static right-aligned line
under the last row's rule, outside .dm-scroll so horizontal scrolling on
narrow screens never carries it out of view. */
#dmatrix .dm-wm{margin-top:7px;text-align:right;font-family:var(--mono);font-size:8.5px;color:var(--muted);opacity:.45;pointer-events:none;user-select:none}
/* Phones cannot fit an 8-column matrix (645px of table in a 331px window), so it scrolls.
Pin the modality name so you always know which row you are reading, and fade the right
edge so the cut reads as "there is more" rather than as broken.
The fade sits in .dm-wrap, NOT inside .dm-scroll: an absolutely positioned child of a
scroll container anchors to the SCROLLED content box, so a right:0 fade placed inside
travels leftward as you swipe and ends up painting over the pinned name column, eating a
character out of the middle of it. Verified 17-08-2026. */
#dmatrix .dm-wrap{position:relative}
#dmatrix .dm-foot{display:flex;align-items:baseline;gap:12px}
#dmatrix .dm-foot .dm-wm{margin-left:auto}
#dmatrix .dm-fade,#dmatrix .dm-swipe{display:none}
@media (max-width:720px){
/* sticky under border-collapse:collapse misbehaves in Safari; separate borders with
the row rules moved onto the cells is the standard workaround and looks identical */
#dmatrix table{border-collapse:separate;border-spacing:0}
#dmatrix th,#dmatrix td{border-bottom:1px solid var(--line)}
#dmatrix td.dm-name,#dmatrix thead th:first-child{position:sticky;left:0;z-index:2;
background:var(--bg-2);box-shadow:1px 0 0 var(--line)}
/* the rule that keeps this pinned cell opaque under a row highlight lives with the
other highlight rules above, not here: it has to be gated on hover, and it needs no
width guard to render correctly. */
#dmatrix.is-scrollable .dm-fade{display:block;position:absolute;top:0;right:0;width:14px;height:100%;
pointer-events:none;z-index:3;background:linear-gradient(90deg,rgba(255,255,255,0),var(--bg-2) 85%)}
#dmatrix.is-scrollable .dm-swipe{display:block;margin-top:7px;font-family:var(--sans);font-size:9.5px;
letter-spacing:.06em;color:var(--muted);opacity:.75}
}
/* Print has no scrolling, and the print CSS already forces this table to full width at 8.5px.
Reset here too so the sticky column can never leak into the PDF at whatever width it renders. */
@media print{
#dmatrix table{border-collapse:collapse !important}
#dmatrix td.dm-name,#dmatrix thead th:first-child{position:static !important;box-shadow:none !important}
#dmatrix .dm-fade,#dmatrix .dm-swipe{display:none !important}
#dmatrix tbody tr.dm-hot td{background:none !important}
}
.visual-frame .dm-labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.visual-frame .dm-labelrow .vis-label{margin-bottom:0}
.visual-frame .dm-hint{font-family:var(--sans);font-size:10px;letter-spacing:.03em;color:var(--muted);white-space:nowrap;opacity:.85}
/* The cue has to name the gesture the reader actually has. Word-swap idiom of the
.vrl-w-hover/.vrl-w-tap hints. The short touch phrasing is deliberate: the label
row is one nowrap line beside a wrappable title, and "rank by any column" pushes
"The modality map" onto a second line at 360px. */
.visual-frame .dm-hint .dm-w-tap{display:none}
@media (hover:none){
.visual-frame .dm-hint .dm-w-hover{display:none}
.visual-frame .dm-hint .dm-w-tap{display:inline}
}
/* Modality-map entrance: rows fade + slide up and their score-bars grow from the
left, staggered top-to-bottom on scroll-in; replays on re-entry. Sorting
re-renders instantly (new rows are born in the final .dm-in state). Reduced
motion: the JS never adds .dm-armed, so the table renders complete. */
@media (prefers-reduced-motion: no-preference){
#dmatrix.dm-armed tbody tr{opacity:0;transform:translateY(7px)}
#dmatrix.dm-armed tbody .dm-bar{transform:scaleX(0);transform-origin:left center}
#dmatrix.dm-armed.dm-in tbody tr{opacity:1;transform:translateY(0);transition:opacity .5s var(--ease-draw),transform .5s var(--ease-draw);transition-delay:var(--dm-d,0s)}
#dmatrix.dm-armed.dm-in tbody .dm-bar{transform:scaleX(1);transition:transform .6s var(--ease-bar);transition-delay:var(--dm-d,0s)}
#dmatrix.dm-armed tbody tr:nth-child(1){--dm-d:.05s}
#dmatrix.dm-armed tbody tr:nth-child(2){--dm-d:.11s}
#dmatrix.dm-armed tbody tr:nth-child(3){--dm-d:.17s}
#dmatrix.dm-armed tbody tr:nth-child(4){--dm-d:.23s}
#dmatrix.dm-armed tbody tr:nth-child(5){--dm-d:.29s}
#dmatrix.dm-armed tbody tr:nth-child(6){--dm-d:.35s}
#dmatrix.dm-armed tbody tr:nth-child(7){--dm-d:.41s}
#dmatrix.dm-armed tbody tr:nth-child(8){--dm-d:.47s}
#dmatrix.dm-armed tbody tr:nth-child(9){--dm-d:.53s}
#dmatrix.dm-armed tbody tr:nth-child(10){--dm-d:.59s}
}
#dmtip{position:fixed;z-index:60;pointer-events:none;display:none;opacity:0;transition:opacity .1s;max-width:270px;background:var(--text);color:#f4ede1;border-radius:6px;padding:10px 12px;font-family:var(--sans);font-size:12px;box-shadow:0 6px 22px rgba(0,0,0,.22)}
#dmtip .tn{font-family:var(--serif);font-size:14px;font-weight:600;color:#fff;margin-bottom:3px}
#dmtip .ts{font-family:var(--mono);font-size:11px;color:#e7c96b;margin-bottom:5px;line-height:1.4}
#dmtip .tt2{color:#d8cdbb;line-height:1.4}
/* PDF / print: the modality map is static on paper -- drop the sort affordances. */
@media print{
.visual-frame .dm-hint{display:none !important}
#dmatrix th .dm-caret{display:none !important}
}
/* Stadium hybrid (§1) --------------------------------------------------- */
.stadium-hybrid { position: relative; }
.stadium-hybrid .stadium-img { width: 100%; display: block; border-radius: 4px; }
.stadium-hybrid .stadium-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.st-lab { position: absolute; transform: translate(-50%, -50%); background: rgba(255,253,249,0.93); border: 1px solid var(--line); border-left: 3px solid; border-radius: 6px; padding: 2px 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; box-shadow: 0 1px 4px rgba(44,36,22,0.12); }
.st-lab b { margin-right: 5px; }
/* The watermark rides the entrance with the photo, so its resting opacity has
to live here rather than inline: an inline declaration outranks the class
rule that holds .sq-fade elements at zero before the reveal fires. */
.stadium-hybrid .sa-wm { opacity: 0.45; }
.stadium-readout { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.stadium-readout svg { width: 100%; height: auto; display: block; }
/* Entrance. Only the three labels used to move, so the figure arrived mostly
finished; now it assembles marker by marker, in the order the prose walks
the stadium (1 outside the wall, 2 in the wall, 3 down in the crowd). The
photo fades, then for each marker the pin lands, its leader line draws out
from the pin toward the rim, and the label settles at the far end.
Rides the shared .anim-seq engine: the stage carries the class, JS arms it
only when it will actually animate, so no-JS / no-IO / reduced-motion / PDF
readers get the finished figure instead of a blank one (the old
.st-lab { opacity: 0 } had no such gate). Per-element timing is inline --d,
the same idiom as .sq-fade / .sq-draw, which the photo and the three leader
lines use directly.
Pins and labels are anchored with transform: translate(-50%, -50%), so every
keyframe here restates that translate; a bare scale() would survive as the
filled final value and knock them off their anchor points. */
@media (prefers-reduced-motion: no-preference) {
.anim-seq.seq-armed .stadium-hybrid .sa-wm { opacity: 0; }
.anim-seq.seq-armed .sa-pin { opacity: 0; pointer-events: none; }
.anim-seq.seq-armed.seq-in .sa-pin {
pointer-events: auto;
animation: saPinIn 0.5s var(--ease-spring) both;
animation-delay: var(--d, 0s);
}
@keyframes saPinIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.anim-seq.seq-armed .st-lab { opacity: 0; }
.anim-seq.seq-armed.seq-in .st-lab {
animation: saLabIn 0.45s var(--ease-draw) both;
animation-delay: var(--d, 0s);
}
@keyframes saLabIn {
from { opacity: 0; transform: translate(-50%, calc(-50% + 5px)); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
/* The readout strip is display:none on hover-capable screens, so this only
ever runs on touch, where the strip is the whole payload. It rises in
after the three markers have landed. */
.anim-seq.seq-armed .stadium-readout { opacity: 0; }
.anim-seq.seq-armed.seq-in .stadium-readout {
animation: saReadoutIn 0.6s var(--ease-draw) 1.3s both;
}
@keyframes saReadoutIn {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: none; }
}
}
/* Print: the figure must be whole whether or not the entrance ever fired.
(The PDF flatten forces reduced motion, so it never arms; this covers a
reader printing the live page from a figure they never scrolled past.) */
@media print {
.stadium-hybrid .sa-pin, .stadium-hybrid .st-lab, .stadium-hybrid .stadium-img, .stadium-readout { opacity: 1 !important; }
.stadium-hybrid .sa-wm { opacity: 0.45 !important; }
.stadium-ov line { opacity: 0.7 !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.stadium-hybrid .sa-pin, .stadium-hybrid .st-lab, .stadium-hybrid .stadium-img,
.stadium-hybrid .sa-wm, .stadium-ov line, .stadium-readout { animation: none !important; }
}
/* Stadium §1 pins: hover-to-hear on screen; readout strip is the touch/PDF fallback */
.stadium-hybrid .pin { position: absolute; width: 36px; height: 36px; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 6; cursor: pointer; }
.stadium-hybrid .pin::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.stadium-hybrid .pin .dot { width: 25px; height: 25px; border-radius: 50%; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 12.5px; box-shadow: 0 1px 3px rgba(44,36,22,.35), 0 0 0 2px #fff; transition: box-shadow .16s; }
.stadium-hybrid .pin:hover .dot { box-shadow: 0 1px 3px rgba(44,36,22,.35), 0 0 0 2px #fff, 0 0 0 6px var(--cr); }
.stadium-hybrid .pin .tip { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%) translateY(4px); width: 172px; background: rgba(255,253,249,.98); border: 1px solid var(--line); border-top: 3px solid; border-radius: 9px; padding: 9px 11px 10px; box-shadow: 0 6px 20px rgba(44,36,22,.18); opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s; pointer-events: none; z-index: 8; }
.stadium-hybrid .pin:hover .tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Pins 1 & 2 hug the figure's left edge; their 172px tooltip, centred, clips
~35px off-screen on mobile (down to 320px). tip-right anchors it to open
rightward so it stays fully in view. The tip-right class was already on the
markup; this supplies the rule it was waiting for. */
.stadium-hybrid .pin.tip-right .tip { transform: translateX(-24px) translateY(4px); }
.stadium-hybrid .pin.tip-right:hover .tip { transform: translateX(-24px) translateY(0); }
.stadium-hybrid .pin .tw { width: 100%; height: 34px; display: block; }
.stadium-hybrid .pin .tn { font-family: var(--sans); font-weight: 700; font-size: 12.5px; margin-top: 5px; }
.stadium-hybrid .pin .td { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
/* §1 stadium waveform drift: waves rest still, and drift only while the figure is "live" (hover on pointer devices, in-view on touch). Ported from the redesign lab. */
[class~="06-stadium-analogy-drift"],
[class~="06-stadium-analogy-drift-tw"] { transform: translateX(0); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
[class~="06-stadium-analogy-live"] [class~="06-stadium-analogy-drift"] { animation: sa06drift 9s linear infinite; }
[class~="06-stadium-analogy-live"] [class~="06-stadium-analogy-drift-tw"] { animation: sa06driftTw 7s linear infinite; }
@keyframes sa06drift { from { transform: translateX(0); } to { transform: translateX(-174px); } }
@keyframes sa06driftTw { from { transform: translateX(0); } to { transform: translateX(-138px); } }
}
.stadium-hint { position: absolute; top: 8px; right: 10px; font-family: var(--sans); font-size: 11px; color: var(--muted); background: rgba(255,253,249,.8); padding: 2px 8px; border-radius: 20px; z-index: 5; display: none; }
/* Default (touch / no-hover): readout strip shown = static PDF variant. Hover-capable screens: hide strip, show hint = interactive variant. */
@media (hover: hover) {
.stadium-readout { display: none; }
.stadium-hint { display: block; }
}
/* Wide screens: running text one point up. Column and every other size
stay put; nothing below 1600px, and nothing in print, changes.
Quiet-aside blockquotes ride along so they keep sitting a touch below
body text optically: EB Garamond's x-height is 0.405em against Source
Serif's 0.485em, so 19/17.5 here reproduces the 18/16.5 ratio the
narrower widths already have (x-height 7.69px vs 8.43px, 0.91).
Both selectors are needed: blockquote:not(.thesis) p outranks a bare
blockquote rule, so the text-in-a-paragraph case needs its own line. */
@media screen and (min-width: 1600px) {
p { font-size: 17.5px; }
ul li { font-size: 17px; }
.the-bet p, .the-bet li { font-size: 17.5px !important; }
blockquote:not(.thesis), blockquote:not(.thesis) p { font-size: 19px; }
}
/* ---- figure motion-control chrome (from preview.html vrl-chrome) ---- */
/* Figure motion-control chrome: hover/tap cues */
.vrl-stage{position:relative}
.vrl-hint{position:absolute;right:12px;top:10px;display:flex;align-items:center;gap:7px;font-family:var(--sans,'Inter',sans-serif);font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);opacity:.6;transition:opacity .45s ease;pointer-events:none;z-index:4}
.vrl-hint[data-off]{opacity:0}
.vrl-ping{position:relative;width:8px;height:8px;flex:0 0 auto}
.vrl-ping::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--accent-strong);opacity:.75}
.vrl-ping::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent-strong);animation:vrl-ping 2.6s ease-out infinite}
@keyframes vrl-ping{0%{transform:scale(.5);opacity:.7}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion: reduce){
.vrl-hint{display:none}
.vrl-ping::after{animation:none}
}
@media (hover: none){
.vrl-hint{display:none}
}
.vrl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.vrl-head .vis-label{margin-bottom:0}
/* The hint is a 2-4 word affordance, never prose: on a phone the long title wins
the space contest and breaks "tap to compare" in half. Pin the hint and let the
title wrap around it instead. A broken hint also drags itself out of line with
the title, because this box's baseline comes from the empty ping dot. Same
treatment as .dm-hint. */
.vrl-head .vrl-hint{position:static;white-space:nowrap}
.vrl-w-tap{display:none}
@media (hover: none){
.vrl-head .vrl-hint.vrl-tapable{display:flex}
.vrl-tapable .vrl-w-hover{display:none}
.vrl-tapable .vrl-w-tap{display:inline}
}
/* ---- print: interactive controls that do nothing on paper ----
These rules used to live only in pdf/make-spike-excerpt.py, which injects its own
stylesheet over the flattened document. That made the PDF itself correct but left
every other consumer of the essay's print CSS wrong. pdf/capture-figure-frames.mjs
renders preview.html under emulateMedia('print') to show the review playground what
each figure will actually print as, and it never sees the injected sheet: the
playground was showing a live slider under the corpus-cost chart and the Timeline
half of the predictions figure, neither of which is in the PDF. Owning the rules
here makes the two agree by construction instead of by coincidence. The pipeline
still carries its copy of them; it is now redundant rather than load-bearing.
(25-08-2026.) */
@media print {
/* corpus-cost slider: rescales the neural-corpus bar. On paper the chart renders its
default ($300 per user-hour, so $3.0B, the same figure the prose beside it quotes),
which leaves the control dead. The readout line and the comparison chips under it
are the payload and stay. */
[id="31-corpus-cost-a-rate"] { display: none !important; }
/* Predictions overview: print takes the confidence-against-time scatter, not the
default Timeline view (Sat, 12-08-2026). Both SVGs are fully drawn at init, so this
is a visibility swap; !important beats the screen toggle rule #p2r .chartbox.hide. */
#p2r-hero-timeline { display: none !important; }
#p2r-hero-scatter { display: block !important; }
/* Page chrome with no paper equivalent: the scroll-progress bar, and the header
"Last updated" chip (the printed header carries the byline only; version history
lives on the About page). */
.reading-progress, .last-updated { display: none !important; }
}
/* ---- A8 paragraph permalinks (from preview.html tail) ---- */
/* Watermark size, phone: the html stamps are plain CSS px so they do not
scale with their figure the way the svg ones do, which left them at 8.5px
on a phone while the svg stamp in the next figure sat at 4px. Clamp them
into the same band the normalizer applies to svg (see the enhancement
layer). This block is last in document order, which is what lets it beat
the figure-local rules; media queries add no specificity. The iceberg
stamp already has its own phone rule at 5.78px and is left alone. */
.sa-wm { font-size: 8.5px; }
@media (max-width: 640px) {
.decode-figure .dw-wm, .reread-wm, #dmatrix .dm-wm, .pf34c-wm, .sa-wm { font-size: 7px; }
/* stadium: a touch lower on a phone (Sat, 19-09-2026); !important beats the inline bottom:8px */
.stadium-hybrid .sa-wm { bottom: 4px !important; }
}
article.essay > p{position:relative}
.pl-pmark{position:absolute;left:-1.5em;top:.28em;font-family:Georgia,serif;font-size:15.2px;
color:var(--accent,#B8860B);opacity:0;cursor:pointer;text-decoration:none;user-select:none;transition:opacity .15s ease}
/* paragraph marks measured 3.7px below their first-line center at the base
.28em; scoped correction so blockquote/pull-quote/figure tunings keep theirs */
article.essay > p > .pl-pmark{top:.04em}
article.essay > p:hover > .pl-pmark{opacity:.4}
.pl-pmark:hover{opacity:1}
/* click ack (set by mark()): opacity pin only, deliberately NO wash/pill/scale
(Sat tried and removed each); the toast is the primary feedback. Held ~400ms then eased back by the mark's own
transition; !important beats the per-container :hover ladder above without
enumerating it */
.pl-pmark.pl-ack{opacity:1 !important;transition:opacity .12s ease}
/* slow fade only on the acknowledged path (class swapped in after the hold) */
.pl-pmark.pl-ack-out{transition:opacity .3s ease}
/* invisible hit-area extension: ~25x38px target (tablets take taps here) */
.pl-pmark::after{content:"";position:absolute;top:-6px;bottom:-6px;left:-9px;right:-9px}
article.essay > blockquote{position:relative}
article.essay > blockquote > .pl-pmark{top:1.1em}
article.essay > blockquote:hover > .pl-pmark{opacity:.4}
.pull-quote > .pl-pmark{top:.55em}
/* list items + checkpoint/story paragraphs (02-09-2026): same treatment as
paragraphs. Lists are indented (1.6em margin + .4em padding) so their marks
push further out to clear the bullet/number glyphs and land near the main
paragraph column; the tinted .the-bet/.story-scene boxes keep theirs inside
the box, clear of the 3px border-left. */
article.essay > ul > li,article.essay > ol > li,.the-bet > p,.the-bet li,.story-scene > p{position:relative}
article.essay > ul > li:hover > .pl-pmark,article.essay > ol > li:hover > .pl-pmark,.the-bet > p:hover > .pl-pmark,.the-bet li:hover > .pl-pmark,.story-scene > p:hover > .pl-pmark{opacity:.4}
article.essay > ul > li > .pl-pmark,article.essay > ol > li > .pl-pmark{left:-3.4em;top:.04em}
.the-bet > p > .pl-pmark{left:-1.2em;top:.04em}
.the-bet li > .pl-pmark{left:-2.5em;top:.04em}
.story-scene > p > .pl-pmark{left:-1.5em;top:.04em}
.visual-frame,.cine-plate{position:relative}
/* .pl-anchored is set by the figure pass on every container it anchors, so these
rules cover .historical-plate and .brain-loop (added 24-08-2026) and whatever
figure type comes next without this list having to grow again. Deliberately NOT
set by mark(): paragraphs and blockquotes take the pl-arrive background wash on
:target, not the figure ring, so the class stays scoped to figures.
The .visual-frame,.cine-plate position:relative above is kept as-is: it predates
the permalink pass and holds with JS disabled, where pl-anchored never lands. */
.pl-anchored{position:relative}
.pl-anchored:hover > .pl-pmark{opacity:.4}
/* the one full-bleed plate starts at the viewport edge: tuck its mark inside */
.cine-plate.wide > .pl-pmark{left:8px}
/* land arrival targets below ~5 lines of context: the glow marks the target,
so pinning it to the exact viewport top is unnecessary and disorienting */
.pl-anchored[id],.visual-frame[id],.cine-plate[id],article.essay > blockquote[id],.pull-quote[id],article.essay > p[id],.essay h2[id],article.essay > ul > li[id],article.essay > ol > li[id],.the-bet > p[id],.the-bet li[id],.story-scene > p[id]{scroll-margin-top:96px}
/* Arrival glow: the receiving half of the ¶/# permalinks. Opening a copied
link plays a one-shot brass wash on the target (150ms hold via delay +
backwards fill, then a 1.5s fade; steady state untouched). The copier's own
page never self-flashes: replaceState does not re-match :target. Figures
get a ring instead of a fill (they already carry panel border + bg). */
/* the wash silhouette is the spread shadow's outer edge: css-backgrounds-3
inflates its corners by s*(1+(r/s-1)^3), so with the 10px spread a declared
6px rendered ~15px and 4px still ~12px. 1px lands the visible corner at
~4px while keeping the full 10px of air. Declared inside the keyframes so
it exists only while the wash is visible and never rounds the blockquote
border or heading hairline at rest */
@keyframes pl-arrive{from{background-color:rgba(184,134,11,.18);box-shadow:0 0 0 10px rgba(184,134,11,.18);border-radius:1px}to{background-color:transparent;box-shadow:0 0 0 10px rgba(184,134,11,0);border-radius:1px}}
article.essay > p:target,article.essay > blockquote:target,.essay h2:target,article.essay > ul > li:target,article.essay > ol > li:target,.the-bet > p:target,.the-bet li:target,.story-scene > p:target{animation:pl-arrive 1.5s ease-out .15s backwards}
@keyframes pl-arrive-ring{from{outline-color:rgba(184,134,11,.4)}to{outline-color:rgba(184,134,11,0)}}
.pl-anchored:target{outline:3px solid transparent;outline-offset:2px;animation:pl-arrive-ring 1.5s ease-out .15s backwards}
@media (prefers-reduced-motion:reduce){
article.essay > p:target,article.essay > blockquote:target,.essay h2:target,.pl-anchored:target,article.essay > ul > li:target,article.essay > ol > li:target,.the-bet > p:target,.the-bet li:target,.story-scene > p:target{animation:none}
}
@media(max-width:1100px){.pl-pmark{left:-1.15em}
article.essay > ul > li > .pl-pmark,article.essay > ol > li > .pl-pmark{left:-3.05em}
.the-bet > p > .pl-pmark{left:-1.2em}
.the-bet li > .pl-pmark{left:-2.5em}
.story-scene > p > .pl-pmark{left:-1.5em}}
@media(max-width:720px){.pl-pmark{display:none}}
/* The bottom list is a content source for the sidenote/popover cloner, never a rendered
section: >=1200px the gutter sidenote serves, 641-1199px the footnote popover serves,
<=640px preview.html already hides it in favour of the tap bubble. Keep the markup: the
cloner builds fnMap from `.footnotes [id^="fn-"]` and it is the only source of note text. */
@media (min-width: 641px) { .footnotes { display: none; } }
/* ================= Phase B design layer (ported from page-format-playground.html) ================= */
h2[id], .chapter-plate[id], .visual-frame[id], .cine-plate[id], article.essay > blockquote[id], .pull-quote[id] { scroll-margin-top: 24px; }
/* Nav-jump wash gate (class set by the head inline script when the arrival
hash was stamped by a nav click): suppress the :target permalink wash.
!important because the pl-arrive rules in the content CSS carry higher
specificity (article.essay > p:target). Lifted on the first hashchange. */
html.pl-no-arrive :target{animation:none !important}
/* ---- fixed section index, left gutter (nav-essayindex) ---- */
.nav-essayindex{position:fixed;left:18px;top:24px;bottom:12px;width:200px;overflow-y:auto;font-family:var(--sans);font-size:11.5px;z-index:24;padding-right:6px}
.nav-essayindex::-webkit-scrollbar{width:4px}
.nav-essayindex::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.nav-essayindex a{display:block;text-decoration:none;border-bottom:none}
.nav-essayindex .np-part{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:color-mix(in srgb,var(--accent) 62%,var(--text-2));padding:12px 0 5px 10px;border-left:2px solid transparent;margin-left:-2px;cursor:pointer;transition:color .15s ease}
.nav-essayindex .np-part:hover{color:var(--accent)}
.nav-essayindex .np-part.cur{color:var(--accent);font-weight:700;border-left-color:var(--accent)}
.nav-essayindex .np-group:first-of-type .np-part{padding-top:2px}
.nav-essayindex .np-sec{padding:4px 0 4px 10px;color:var(--muted);cursor:pointer;border-left:2px solid transparent;margin-left:-2px;line-height:1.35;transition:color .2s,border-color .2s}
.nav-essayindex .np-sec:hover{color:var(--text)}
.nav-essayindex .np-sec.cur{color:var(--accent-strong);border-left-color:var(--accent);font-weight:600}
.nav-essayindex .np-sec .n{font-family:var(--mono);font-size:10px;color:var(--dim);margin-right:6px}
.nav-essayindex .np-end{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);padding:12px 0 5px 10px;cursor:pointer;border-top:1px solid var(--line);margin-top:14px;transition:color .15s ease}
.nav-essayindex .np-end:hover{color:var(--accent)}
.nav-essayindex .np-end.cur{font-weight:700}
.nav-essayindex .np-end + .np-end{border-top:none;margin-top:0;padding-top:4px}
.nav-essayindex .np-pdf{font-size:9.5px;letter-spacing:0.12em;color:var(--dim)}
.nav-unfold .np-secs{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease-draw)}
.nav-unfold .np-secs-i{min-height:0;overflow:hidden;transition:opacity .25s var(--ease-draw),transform .3s var(--ease-draw),visibility 0s .3s}
.nav-unfold .np-group:not(.cur) .np-secs{grid-template-rows:0fr}
.nav-unfold .np-group:not(.cur) .np-secs-i{opacity:0;transform:translateY(-3px);visibility:hidden}
.nav-unfold .np-group:not(.cur):hover .np-secs{grid-template-rows:1fr;transition-delay:.12s}
.nav-unfold .np-group:not(.cur):hover .np-secs-i{opacity:1;transform:none;visibility:visible;transition-delay:.12s}
.nav-unfold .np-group:not(.cur):focus-within .np-secs{grid-template-rows:1fr;transition-delay:0s}
.nav-unfold .np-group:not(.cur):focus-within .np-secs-i{opacity:1;transform:none;visibility:visible;transition-delay:0s}
@media (prefers-reduced-motion: reduce){
.nav-unfold .np-secs,.nav-unfold .np-secs-i{transition:none}
}
@media (max-width: 1380px){ .nav-essayindex{display:none} }
/* ---- mobile / narrow drawer (top-right card button + fullscreen overlay) ---- */
.nav-drawer-btn.ndb-topright{position:fixed;top:12px;right:12px;z-index:46;width:40px;height:40px;border-radius:8px;background:var(--bg-2);color:var(--accent);border:1px solid var(--line);cursor:pointer;font-size:20px;box-shadow:0 4px 14px var(--line);display:none;align-items:center;justify-content:center;padding:0}
.nav-drawer-btn.ndb-topright.open{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width: 1380px){ .nav-drawer-btn.ndb-topright{display:flex} }
.nav-drawer{position:fixed;inset:0;z-index:45;background:rgba(20,14,4,0.5);display:none}
.nav-drawer.open{display:block}
.nav-drawer .nd-panel{position:absolute;inset:0;width:100%;max-width:none;height:100%;background:var(--bg);padding:28px 24px 32px;overflow-y:auto;box-shadow:none}
.nd-panel a{display:block;text-decoration:none;border-bottom:none}
.nd-panel .np-title{font-family:var(--sans);font-size:9.5px;text-transform:uppercase;letter-spacing:0.16em;color:var(--muted);font-weight:600;margin:0 4px 16px}
.nd-panel .np-part{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--text);padding:12px 4px 5px;cursor:pointer}
/* The Part heading keeps its brass on every page, alongside the washed section row.
The two cues answer different questions (which Part, which section), and the wash
now carries the weight, so the brass no longer has to do the job on its own. On
its own it could not: brass is *lighter* (4.76:1 against the cream) than the
--text the other Part headings are set in (14.33:1). Reading second, next to the
wash, it lands as a hue change rather than as lost emphasis. */
.nd-panel .np-part.cur{color:var(--accent-strong)}
.nd-panel .np-sec{font-family:var(--sans);font-size:13.5px;color:var(--text-2);padding:7px 4px 7px 18px;cursor:pointer;line-height:1.4}
/* The current row is a brass wash bleeding the full width of the panel, with the
title darker and heavier than the rows around it. Colour alone did not carry it:
--accent-strong sits at 4.76:1 against the cream while an ordinary row sits at
7.61:1, so marking the row in brass made it the *lightest* text in a flat list of
32, which read as no cue at all on a phone. The negative margins reach the screen
edge; the padding compensates by exactly as much, so the title never shifts
sideways as the spy moves the cue from row to row. */
.nd-panel .np-sec.cur{margin:0 -24px;padding-left:42px;padding-right:28px;background:var(--accent-soft);color:var(--text);font-weight:600}
.nd-panel .np-sec .n{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-right:8px}
.nd-panel .np-sec.cur .n{color:var(--accent)}
.nd-panel .np-end{font-family:var(--sans);font-size:14px;color:var(--text-2);padding:14px 4px 5px;cursor:pointer;border-top:1px solid var(--line);margin-top:14px}
.nd-panel .np-end.cur{color:var(--accent-strong);font-weight:600}
.nd-panel .np-end + .np-end{border-top:none;margin-top:0;padding-top:7px}
body.drawer-open{overflow:hidden}
/* ---- cross-page nav fade (touch): instant cream response while the next page loads ---- */
html.pl-navigating::after{content:"";position:fixed;inset:0;z-index:400;background:var(--bg);opacity:1;transition:opacity .18s ease}
@starting-style{html.pl-navigating::after{opacity:0}}
/* ---- chapter plate as page opener (opener-essayplate values) ---- */
.chapter-plate{border-top:none;border-bottom:none;margin:30px 0 30px;padding:8px 0 12px}
.chapter-plate .plate-img{max-width:300px;border-radius:5px;opacity:0.94;margin:0 auto 24px}
/* ---- end matter: prev/next arrows (no hairline: border-top dropped 02-08-2026) ---- */
.endmatter{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.pn-arrows{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px;font-family:var(--serif);font-size:15px;font-weight:600}
.pn-arrows .pna,.pn-arrows a.pna{color:var(--text-2);cursor:pointer;transition:color .15s ease;text-decoration:none;border-bottom:none;background:none}
.pn-arrows .pna:hover,.pn-arrows a.pna:hover{color:var(--accent-strong)}
.pn-arrows .pna .arw{color:inherit}
/* ---- date line + version-history popover (Executive Summary) ---- */
.dateline{display:inline-block;margin-top:0}
.dateline::before{content:"\00B7";margin:0 8px;color:var(--dim)}
.dt-hoverline{font-family:var(--sans);font-size:12px;color:var(--muted);position:relative;cursor:pointer;display:inline-block}
.dt-hoverline .lu-word{color:var(--muted);font-weight:400;margin-right:4px;font-size:12px;text-transform:none;letter-spacing:0.02em}
.dt-hoverline .dtv{color:var(--muted);border-bottom:1px dotted color-mix(in srgb,var(--accent) 50%,transparent);transition:color .15s ease}
.dt-hoverline:hover .dtv{color:var(--accent-strong);border-bottom-color:var(--accent)}
.dt-hoverline.open .clog-pop,.dt-hoverline:hover .clog-pop{display:block}
.clog-pop{display:none;position:absolute;width:255px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 10px 28px color-mix(in srgb,var(--text) 18%,transparent);z-index:50;text-align:left}
.dt-hoverline .clog-pop{top:100%;left:0;transform:none;margin-top:7px}
.dt-hoverline .clog-pop::before{content:"";position:absolute;top:-9px;left:0;right:0;height:9px}
.clog-pop .cl-h{display:block;font-family:var(--sans);font-size:9.5px;text-transform:uppercase;letter-spacing:0.13em;color:var(--muted);font-weight:600;margin-bottom:8px}
.clog-pop .cl-r{display:flex;gap:10px;font-family:var(--sans);font-size:11.5px;color:var(--text-2);padding:3px 0;line-height:1.45}
.clog-pop .cl-d{font-family:var(--mono);font-size:10px;color:var(--accent-strong);flex:0 0 auto;padding-top:1px}
@media (max-width:480px){.dt-hoverline .clog-pop{left:auto;right:0}}
/* ---- thesis box (playground restyle) ---- */
blockquote.thesis{border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,transparent),color-mix(in srgb,var(--accent) 2%,transparent));border-radius:10px;padding:22px 22px 18px}
/* ---- resume chip ("pick up where you left off"): fixed pill, bottom center ---- */
.resume-chip{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);display:flex;align-items:center;max-width:min(92vw,480px);background:var(--bg-2);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:999px;box-shadow:0 10px 28px color-mix(in srgb,var(--text) 18%,transparent);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.resume-chip.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.resume-chip .rc-link{display:flex;align-items:baseline;gap:8px;min-width:0;padding:10px 2px 10px 16px;font-family:var(--sans);font-size:12.5px;color:var(--text-2);text-decoration:none;border-bottom:none}
.resume-chip .rc-k{flex:0 0 auto;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.13em;color:var(--accent)}
.resume-chip .rc-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-chip .rc-link:hover .rc-t{color:var(--accent-strong)}
.resume-chip .rc-x{flex:0 0 auto;width:30px;height:30px;margin-right:5px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}
.resume-chip .rc-x:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
.resume-chip .rc-link:focus-visible,.resume-chip .rc-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:999px}
@media (max-width:640px){.resume-chip{max-width:calc(100vw - 24px)}}
@media (prefers-reduced-motion: reduce){.resume-chip{transition:none}}
@media print{.resume-chip{display:none}}
/* FOUC guard release (see head_template): CSS parse restores visibility;
the head script restores opacity on fonts-ready (or its 400ms cap).
Opacity must NOT be set here -- that would bypass the font gate. */
html { visibility: visible; transition: opacity .18s ease; }
|