@atelic-action/ui 0.17.1 → 1.0.0

package/src/styles/artifact.css

@@ -19,7 +19,7 @@
 	   ================================================================= */
 
 	/* ---- the grade chip ---- */
-	:is(.mkt, .atelic-ui) .op-grade {
+	.atelic-ui .op-grade {
 		display: inline-block;
 		vertical-align: 0.1em;
 		margin-left: 0.6em;
@@ -41,51 +41,51 @@
 	   everywhere, whatever the brand's palette, so they are not theme tokens.
 	   The orange sits between the yellow's hue and the red's so the four stay
 	   apart on paper, and its letter clears AA on its own tint. */
-	:is(.mkt, .atelic-ui) .op-grade[data-grade="a"] {
+	.atelic-ui .op-grade[data-grade="a"] {
 		color: #1b7f3b;
 		border-color: #1b7f3b;
 		background: #eaf6ee;
 	}
-	:is(.mkt, .atelic-ui) .op-grade[data-grade="b"] {
+	.atelic-ui .op-grade[data-grade="b"] {
 		color: #9a6b00;
 		border-color: #c99a1a;
 		background: #fdf5dc;
 	}
-	:is(.mkt, .atelic-ui) .op-grade[data-grade="c"] {
+	.atelic-ui .op-grade[data-grade="c"] {
 		color: #a84500;
 		border-color: #e8650a;
 		background: #fff0e3;
 	}
-	:is(.mkt, .atelic-ui) .op-grade[data-grade="d"] {
+	.atelic-ui .op-grade[data-grade="d"] {
 		color: #b3261e;
 		border-color: #b3261e;
 		background: #fdecea;
 	}
 
 	/* ---- the sign off lockup: its container sets the size and the color ---- */
-	:is(.mkt, .atelic-ui) .op-who {
+	.atelic-ui .op-who {
 		display: flex;
 		align-items: center;
 		gap: 10pt;
 	}
-	:is(.mkt, .atelic-ui) .op-who img {
+	.atelic-ui .op-who img {
 		width: 0.6in;
 		height: 0.6in;
 		border-radius: 50%;
 		object-fit: cover;
 		flex-shrink: 0;
 	}
-	:is(.mkt, .atelic-ui) .op-who a {
+	.atelic-ui .op-who a {
 		display: inline-flex;
 		align-items: center;
 		gap: 0.3em;
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .op-who b {
+	.atelic-ui .op-who b {
 		font-weight: 500;
 		color: var(--ink);
 	}
-	:is(.mkt, .atelic-ui) .op-sign {
+	.atelic-ui .op-sign {
 		font-family: var(--font-script);
 		font-size: 15pt;
 		color: var(--ink);
@@ -94,13 +94,13 @@
 	}
 
 	@media screen and (max-width: 899px) {
-		:is(.mkt, .atelic-ui) .op-grade {
+		.atelic-ui .op-grade {
 			font-size: 10px;
 		}
-		:is(.mkt, .atelic-ui) .op-sign {
+		.atelic-ui .op-sign {
 			font-size: 22px;
 		}
-		:is(.mkt, .atelic-ui) .op-who img {
+		.atelic-ui .op-who img {
 			width: 56px;
 			height: 56px;
 		}
@@ -109,11 +109,11 @@
 	/* The sender's logo is the outlined wordmark, an image wider than the square
 	   slot the shared header cuts for a mark, so it keeps its own width, and the
 	   empty text wordmark beside it takes no room. */
-	:is(.mkt, .atelic-ui) .nav-logo .mark {
+	.atelic-ui .nav-logo .mark {
 		width: auto;
 		height: 20px;
 	}
-	:is(.mkt, .atelic-ui) .nav-logo .wordmark:empty {
+	.atelic-ui .nav-logo .wordmark:empty {
 		display: none;
 	}
 
@@ -129,7 +129,7 @@
 	   error); this section only stages it dark and adds the document
 	   classes the decrypted HTML is written against.
 	   ================================================================= */
-	:is(.mkt, .atelic-ui) .gate-stage {
+	.atelic-ui .gate-stage {
 		--gs-stage: var(--surface-dark);
 		--gs-bright: color-mix(in srgb, var(--surface) 96%, white);
 		--gs-dim: color-mix(in srgb, var(--surface) 62%, var(--surface-dark));
@@ -152,18 +152,18 @@
 
 	/* Overscroll and any sub-viewport rounding still expose the page body at
 	   the edges; a page carrying the stage paints its whole shell dark. */
-	:is(.mkt, .atelic-ui):has(.gate-stage) {
+	.atelic-ui:has(.gate-stage) {
 		background: var(--surface-dark);
 	}
 
 	/* ---- the gate card, staged dark ---- */
-	:is(.mkt, .atelic-ui) .gate-hall {
+	.atelic-ui .gate-hall {
 		display: grid;
 		place-items: center;
 		min-height: calc(100svh - var(--nav-height));
 		padding-block: clamp(48px, 9vh, 96px);
 	}
-	:is(.mkt, .atelic-ui) .gate-card {
+	.atelic-ui .gate-card {
 		width: 100%;
 		max-width: 520px;
 		margin-inline: auto;
@@ -173,13 +173,13 @@
 		background: var(--gs-panel);
 		text-align: center;
 	}
-	:is(.mkt, .atelic-ui) .gate-stage .gate-eyebrow {
+	.atelic-ui .gate-stage .gate-eyebrow {
 		margin: 0 0 12px;
 		font-size: 12.5px;
 		letter-spacing: 0.02em;
 		color: var(--gs-faint);
 	}
-	:is(.mkt, .atelic-ui) .gate-stage .gate-headline {
+	.atelic-ui .gate-stage .gate-headline {
 		margin: 0 0 12px;
 		font-family: var(--font-sans);
 		font-weight: 800;
@@ -189,26 +189,26 @@
 		max-width: none;
 		color: var(--gs-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-stage .gate-lead {
+	.atelic-ui .gate-stage .gate-lead {
 		margin: 0 auto 26px;
 		max-width: 42ch;
 		font-size: 15px;
 		line-height: 1.6;
 		color: var(--gs-dim);
 	}
-	:is(.mkt, .atelic-ui) .gate-stage .gate-input {
+	.atelic-ui .gate-stage .gate-input {
 		border-color: var(--gs-border);
 		background: color-mix(in srgb, var(--surface-dark) 94%, var(--surface));
 		color: var(--gs-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-stage .gate-input::placeholder {
+	.atelic-ui .gate-stage .gate-input::placeholder {
 		color: var(--gs-faint);
 	}
-	:is(.mkt, .atelic-ui) .gate-stage .gate-input:focus-visible {
+	.atelic-ui .gate-stage .gate-input:focus-visible {
 		border-color: var(--primary-bright);
 		box-shadow: 0 0 0 3px var(--primary-focus-ring);
 	}
-	:is(.mkt, .atelic-ui) .gate-stage .gate-error {
+	.atelic-ui .gate-stage .gate-error {
 		margin: 20px auto 0;
 		max-width: 46ch;
 		font-size: 14.5px;
@@ -223,12 +223,12 @@
 	   Everything below styles HTML the content module authors, so the
 	   selectors are element level inside .gate-content rather than a class
 	   per line. A client document writes plain markup and inherits this. */
-	:is(.mkt, .atelic-ui) .gate-doc {
+	.atelic-ui .gate-doc {
 		/* The stage itself clears the fixed nav, so the document pads only
 		   its own breathing room. */
 		padding-block: clamp(44px, 8vh, 88px) clamp(64px, 12vh, 132px);
 	}
-	:is(.mkt, .atelic-ui) .gate-content {
+	.atelic-ui .gate-content {
 		/* The document column matches the chrome: .wrap and .nav-inner share
 		   --max-width, so the text aligns with the header bar's edges rather
 		   than sitting in a narrower centered measure. */
@@ -236,29 +236,29 @@
 		font-size: 16.5px;
 		line-height: 1.7;
 	}
-	:is(.mkt, .atelic-ui) .gate-content h1 {
+	.atelic-ui .gate-content h1 {
 		margin: 0 0 10px;
 		font-size: clamp(30px, 4.4vw, 46px);
 		line-height: 1.06;
 		color: var(--gs-bright);
 		text-wrap: balance;
 	}
-	:is(.mkt, .atelic-ui) .gate-content h2 {
+	.atelic-ui .gate-content h2 {
 		margin: 52px 0 14px;
 		font-size: clamp(21px, 2.6vw, 27px);
 		line-height: 1.2;
 		color: var(--gs-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-content h3 {
+	.atelic-ui .gate-content h3 {
 		margin: 28px 0 8px;
 		font-size: 17px;
 		color: var(--gs-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-content p {
+	.atelic-ui .gate-content p {
 		margin: 0 0 16px;
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .gate-content ul {
+	.atelic-ui .gate-content ul {
 		margin: 0 0 16px;
 		padding-left: 22px;
 		display: flex;
@@ -266,35 +266,35 @@
 		gap: 8px;
 		list-style: disc;
 	}
-	:is(.mkt, .atelic-ui) .gate-content li {
+	.atelic-ui .gate-content li {
 		display: list-item;
 		list-style: disc;
 		margin: 0;
 	}
-	:is(.mkt, .atelic-ui) .gate-content li::marker {
+	.atelic-ui .gate-content li::marker {
 		color: var(--primary-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-content strong {
+	.atelic-ui .gate-content strong {
 		color: var(--gs-bright);
 		font-weight: 600;
 	}
-	:is(.mkt, .atelic-ui) .gate-content a {
+	.atelic-ui .gate-content a {
 		color: var(--primary-bright);
 		text-decoration: none;
 		border-bottom: 1px solid currentColor;
 	}
-	:is(.mkt, .atelic-ui) .gate-content hr {
+	.atelic-ui .gate-content hr {
 		margin: 44px 0;
 		border: 0;
 		border-top: 1px solid var(--gs-hairline);
 	}
-	:is(.mkt, .atelic-ui) .gate-meta {
+	.atelic-ui .gate-meta {
 		margin: 0 0 34px;
 		font-family: var(--font-mono);
 		font-size: 12.5px;
 		color: var(--gs-faint);
 	}
-	:is(.mkt, .atelic-ui) .gate-lede {
+	.atelic-ui .gate-lede {
 		font-size: 18px;
 		color: var(--gs-bright);
 	}
@@ -302,7 +302,7 @@
 	/* Tier cards: the shape of a three option quote. Faded panels on the
 	   stage, one hairline lifted to mark the recommended option; no filled
 	   color anywhere, so the CTA button stays the only saturated thing. */
-	:is(.mkt, .atelic-ui) .gate-tiers {
+	.atelic-ui .gate-tiers {
 		display: grid;
 		/* Three explicit columns: auto-fit minted a fourth empty track at
 		   document width and squeezed the cards into three quarters of the
@@ -312,11 +312,11 @@
 		margin: 24px 0 8px;
 	}
 	@media (max-width: 860px) {
-		:is(.mkt, .atelic-ui) .gate-tiers {
+		.atelic-ui .gate-tiers {
 			grid-template-columns: 1fr;
 		}
 	}
-	:is(.mkt, .atelic-ui) .gate-tier {
+	.atelic-ui .gate-tier {
 		display: flex;
 		flex-direction: column;
 		gap: 6px;
@@ -326,20 +326,20 @@
 		background: var(--gs-panel);
 		min-width: 0;
 	}
-	:is(.mkt, .atelic-ui) .gate-tier.is-picked {
+	.atelic-ui .gate-tier.is-picked {
 		border-color: color-mix(in srgb, var(--primary-bright) 55%, transparent);
 	}
-	:is(.mkt, .atelic-ui) .gate-tier-name {
+	.atelic-ui .gate-tier-name {
 		font-weight: 600;
 		font-size: 17px;
 		color: var(--gs-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-tier-price {
+	.atelic-ui .gate-tier-price {
 		font-family: var(--font-mono);
 		font-size: 21px;
 		color: var(--primary-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-tier-note {
+	.atelic-ui .gate-tier-note {
 		font-size: 14px;
 		line-height: 1.55;
 		color: var(--gs-dim);
@@ -360,7 +360,7 @@
 	   Amounts take grid column one (right-aligned, shared right edge);
 	   labels take column two. A bare .gate-tier-price outside the math
 	   block (the add-on card) keeps its standalone look. */
-	:is(.mkt, .atelic-ui) .gate-tier-math {
+	.atelic-ui .gate-tier-math {
 		display: grid;
 		grid-template-columns: max-content auto;
 		column-gap: 10px;
@@ -368,24 +368,36 @@
 		align-items: baseline;
 		justify-content: start;
 	}
-	:is(.mkt, .atelic-ui) .gate-tier-math .gate-tier-was,
-	:is(.mkt, .atelic-ui) .gate-tier-math .gate-tier-credit,
-	:is(.mkt, .atelic-ui) .gate-tier-math .gate-tier-price {
+	.atelic-ui .gate-tier-math .gate-tier-was,
+	.atelic-ui .gate-tier-math .gate-tier-credit,
+	.atelic-ui .gate-tier-math .gate-tier-price {
 		grid-column: 1;
 		text-align: right;
 	}
-	:is(.mkt, .atelic-ui) .gate-tier-mathlabel {
+	/* The label never wraps, so a mark inside it (the asterisk that points
+	   at the footnote under the tiers) stays on the label's line:
+	     <span class="gate-tier-mathlabel">founding member credit<svg>...</svg></span> */
+	.atelic-ui .gate-tier-mathlabel {
 		grid-column: 2;
 		font-size: 13px;
 		color: var(--gs-faint);
+		white-space: nowrap;
+	}
+	.atelic-ui .gate-tier-mathlabel svg {
+		display: inline-block;
+		width: 11px;
+		height: 11px;
+		vertical-align: -1px;
+		margin-left: 2px;
+		color: var(--primary-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-tier-was {
+	.atelic-ui .gate-tier-was {
 		font-family: var(--font-mono);
 		font-size: 15px;
 		color: var(--gs-faint);
 		text-decoration: line-through;
 	}
-	:is(.mkt, .atelic-ui) .gate-tier-credit {
+	.atelic-ui .gate-tier-credit {
 		font-family: var(--font-mono);
 		font-size: 14px;
 		color: var(--gs-dim);
@@ -393,14 +405,57 @@
 
 	/* A full width card in the tier grid, for an add-on (a monthly service
 	   under one-time builds) that applies across every column. */
-	:is(.mkt, .atelic-ui) .gate-tiers .gate-tier.is-addon {
+	.atelic-ui .gate-tiers .gate-tier.is-addon {
 		grid-column: 1 / -1;
 	}
 
+	/* The add-ons row: two monthly cards (Operate, Operate with Paid) side
+	   by side under the builds, instead of each full width. The row spans
+	   the tier grid; the cards inside it sit in its own two columns, and
+	   stack with the tiers on a phone.
+	     <div class="gate-addons">
+	       <div class="gate-tier is-addon">...</div>
+	       <div class="gate-tier is-addon is-picked">...</div>
+	     </div> */
+	.atelic-ui .gate-tiers .gate-addons {
+		grid-column: 1 / -1;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 16px;
+	}
+	.atelic-ui .gate-tiers .gate-addons .gate-tier.is-addon {
+		grid-column: auto;
+	}
+	@media (max-width: 860px) {
+		.atelic-ui .gate-tiers .gate-addons {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	/* The footnote under the tiers: a credit's terms in one line, led by
+	   the same mark the card's label carries.
+	     <p class="gate-footnote"><svg>...</svg><span>...</span></p> */
+	.atelic-ui .gate-content .gate-footnote {
+		display: flex;
+		gap: 8px;
+		align-items: flex-start;
+		margin: 14px 0 0;
+		font-size: 14px;
+		line-height: 1.5;
+		color: var(--gs-dim);
+	}
+	.atelic-ui .gate-content .gate-footnote svg {
+		width: 14px;
+		height: 14px;
+		flex: 0 0 auto;
+		margin-top: 3px;
+		color: var(--primary-bright);
+	}
+
 	/* The icon list: the standard sent artifact list form, each line led
 	   by a small lucide icon that says what the line means. The sealed
 	   content inlines the SVGs. */
-	:is(.mkt, .atelic-ui) .gate-content ul.icon-list {
+	.atelic-ui .gate-content ul.icon-list {
 		list-style: none;
 		margin: 0 0 16px;
 		padding: 0;
@@ -408,51 +463,66 @@
 		flex-direction: column;
 		gap: 12px;
 	}
-	:is(.mkt, .atelic-ui) .gate-content ul.icon-list li {
+	.atelic-ui .gate-content ul.icon-list li {
 		display: flex;
 		align-items: flex-start;
 		gap: 12px;
 		margin: 0;
 		list-style: none;
 	}
-	:is(.mkt, .atelic-ui) .gate-content ul.icon-list svg {
+	.atelic-ui .gate-content ul.icon-list svg {
 		width: 18px;
 		height: 18px;
 		flex: 0 0 auto;
 		margin-top: 3px;
 		color: var(--primary-bright);
 	}
+	/* The icon list inside a tier card, sized for the card: a tier lists
+	   what it buys with icons that mean the thing, never checks. These tie
+	   the document list's selectors, so they sit after them. */
+	.atelic-ui .gate-tier ul.icon-list {
+		margin: 6px 0 0;
+		gap: 8px;
+		font-size: 14px;
+		line-height: 1.5;
+		color: var(--gs-dim);
+	}
+	.atelic-ui .gate-tier ul.icon-list svg {
+		width: 16px;
+		height: 16px;
+		margin-top: 2px;
+	}
 
 	/* Numbered flow: the ordered list for a step-by-step close. */
-	:is(.mkt, .atelic-ui) .gate-content ol {
+	.atelic-ui .gate-content ol {
 		margin: 0 0 16px;
 		padding-left: 24px;
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
 	}
-	:is(.mkt, .atelic-ui) .gate-content ol li {
+	.atelic-ui .gate-content ol li {
 		display: list-item;
 		list-style: decimal;
 		margin: 0;
 	}
-	:is(.mkt, .atelic-ui) .gate-content ol li::marker {
+	.atelic-ui .gate-content ol li::marker {
 		color: var(--primary-bright);
 		font-weight: 700;
 	}
 
 	/* Icon bullets: a checklist variant of the document list, worn by any
 	   ul.gate-checks in the sealed content or inside a tier card. */
-	:is(.mkt, .atelic-ui) .gate-content ul.gate-checks {
+	.atelic-ui .gate-content ul.gate-checks {
 		list-style: none;
 		padding-left: 0;
 	}
-	:is(.mkt, .atelic-ui) .gate-content .gate-checks li {
+	.atelic-ui .gate-content .gate-checks li {
 		position: relative;
 		list-style: none;
 		padding-left: 26px;
 	}
-	:is(.mkt, .atelic-ui) .gate-content .gate-checks li::before {
+	.atelic-ui .gate-content .gate-checks li::before {
 		/* The lucide check, masked so it takes the accent color. A glyph
 		   character would trip the icons-over-emojis test; an SVG matches
 		   the icon set the rest of the site draws from. */
@@ -470,7 +540,7 @@
 			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
 			center / contain no-repeat;
 	}
-	:is(.mkt, .atelic-ui) .gate-tier ul.gate-checks {
+	.atelic-ui .gate-tier ul.gate-checks {
 		margin: 6px 0 0;
 		display: grid;
 		gap: 8px;
@@ -478,12 +548,12 @@
 		line-height: 1.5;
 		color: var(--gs-dim);
 	}
-	:is(.mkt, .atelic-ui) .gate-tier .gate-checks li {
+	.atelic-ui .gate-tier .gate-checks li {
 		padding-left: 22px;
 	}
 
 	/* ---- the close: sign off, then the person lockup ---- */
-	:is(.mkt, .atelic-ui) .gate-sign {
+	.atelic-ui .gate-sign {
 		margin: 44px 0 18px;
 		/* The pitch surface sign off is the script face (voice.md rule 9),
 		   the same face the writeup and the monthly page close on, centered
@@ -493,14 +563,14 @@
 		color: var(--secondary-soft);
 		text-align: center;
 	}
-	:is(.mkt, .atelic-ui) .gate-person {
+	.atelic-ui .gate-person {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		gap: 18px;
 		text-align: left;
 	}
-	:is(.mkt, .atelic-ui) .gate-person img {
+	.atelic-ui .gate-person img {
 		width: 88px;
 		height: 88px;
 		border-radius: 50%;
@@ -508,23 +578,23 @@
 		display: block;
 		flex: none;
 	}
-	:is(.mkt, .atelic-ui) .gate-person-name {
+	.atelic-ui .gate-person-name {
 		display: block;
 		font-weight: 600;
 		font-size: 17px;
 		color: var(--gs-bright);
 	}
-	:is(.mkt, .atelic-ui) .gate-person-role {
+	.atelic-ui .gate-person-role {
 		display: block;
 		margin-top: 4px;
 		font-size: 14px;
 		color: var(--gs-dim);
 	}
-	:is(.mkt, .atelic-ui) .gate-person-role a {
+	.atelic-ui .gate-person-role a {
 		color: inherit;
 		border-bottom: 1px solid currentColor;
 	}
-	:is(.mkt, .atelic-ui) .gate-person-mail {
+	.atelic-ui .gate-person-mail {
 		display: inline-flex;
 		align-items: center;
 		gap: 7px;
@@ -536,7 +606,7 @@
 		border-bottom: 1px solid currentColor;
 		padding-bottom: 1px;
 	}
-	:is(.mkt, .atelic-ui) .gate-person-mail svg {
+	.atelic-ui .gate-person-mail svg {
 		width: 15px;
 		height: 15px;
 	}
@@ -556,7 +626,7 @@
 	   Tokens only (theme.css), except the printed sheet's white. The grade
 	   chip and the sign off are the shared classes at the head of this sheet.
 	   ================================================================= */
-	:is(.mkt, .atelic-ui) .rp {
+	.atelic-ui .rp {
 		--rp-ink: var(--ink);
 		--rp-ink-soft: var(--ink-soft);
 		--rp-ink-faint: var(--neutral-500);
@@ -568,16 +638,16 @@
 		background: var(--surface);
 		padding: calc(var(--nav-height) + 32px) 24px 48px;
 	}
-	:is(.mkt, .atelic-ui) .rp a {
+	.atelic-ui .rp a {
 		color: inherit;
 		text-decoration: none;
 	}
-	:is(.mkt, .atelic-ui) .rp a:hover {
+	.atelic-ui .rp a:hover {
 		color: var(--rp-accent);
 	}
 
 	/* ---- the sheet ---- */
-	:is(.mkt, .atelic-ui) .rp-sheet {
+	.atelic-ui .rp-sheet {
 		width: 8.5in;
 		max-width: 100%;
 		margin: 0 auto;
@@ -592,14 +662,14 @@
 	}
 
 	/* ---- the title and the period ---- */
-	:is(.mkt, .atelic-ui) .rp-period {
+	.atelic-ui .rp-period {
 		font-family: var(--font-mono);
 		font-size: 8pt;
 		letter-spacing: 0.12em;
 		text-transform: uppercase;
 		color: var(--rp-accent);
 	}
-	:is(.mkt, .atelic-ui) .rp h1 {
+	.atelic-ui .rp h1 {
 		font-family: var(--font-sans);
 		font-size: 25pt;
 		font-weight: 600;
@@ -611,7 +681,7 @@
 	}
 
 	/* ---- the leads: four questions, each a figure and one sentence ---- */
-	:is(.mkt, .atelic-ui) .rp-leads {
+	.atelic-ui .rp-leads {
 		display: grid;
 		grid-template-columns: repeat(4, minmax(0, 1fr));
 		gap: 0 16pt;
@@ -619,13 +689,13 @@
 		border-top: 1.5px solid var(--rp-ink);
 		border-bottom: 1px solid var(--rp-rule);
 	}
-	:is(.mkt, .atelic-ui) .rp-lead {
+	.atelic-ui .rp-lead {
 		display: flex;
 		flex-direction: column;
 		gap: 3pt;
 		min-width: 0;
 	}
-	:is(.mkt, .atelic-ui) .rp-q {
+	.atelic-ui .rp-q {
 		margin: 0;
 		font-family: var(--font-mono);
 		font-size: 7pt;
@@ -635,14 +705,14 @@
 		text-transform: uppercase;
 		color: var(--rp-accent);
 	}
-	:is(.mkt, .atelic-ui) .rp-figure {
+	.atelic-ui .rp-figure {
 		font-size: 18pt;
 		font-weight: 600;
 		letter-spacing: -0.02em;
 		line-height: 1.1;
 		color: var(--rp-ink);
 	}
-	:is(.mkt, .atelic-ui) .rp-lead p {
+	.atelic-ui .rp-lead p {
 		margin: 0;
 		font-size: 8.4pt;
 		line-height: 1.4;
@@ -651,14 +721,14 @@
 	}
 
 	/* ---- the seven grades: now, last month, baseline, what moved ---- */
-	:is(.mkt, .atelic-ui) .rp-grades {
+	.atelic-ui .rp-grades {
 		width: 100%;
 		border-collapse: collapse;
 		margin: 14pt 0 16pt;
 		font-size: 8.4pt;
 		line-height: 1.35;
 	}
-	:is(.mkt, .atelic-ui) .rp-grades th {
+	.atelic-ui .rp-grades th {
 		text-align: left;
 		padding: 0 6pt 4pt 0;
 		border-bottom: 1.5px solid var(--rp-ink);
@@ -670,16 +740,16 @@
 		white-space: nowrap;
 		color: var(--rp-ink-faint);
 	}
-	:is(.mkt, .atelic-ui) .rp-grades td {
+	.atelic-ui .rp-grades td {
 		padding: 4pt 6pt 4pt 0;
 		border-bottom: 1px solid var(--rp-rule);
 		vertical-align: top;
 		color: var(--rp-ink);
 	}
-	:is(.mkt, .atelic-ui) .rp-grades tr.is-tier-start:not(:first-child) td {
+	.atelic-ui .rp-grades tr.is-tier-start:not(:first-child) td {
 		border-top: 1px solid var(--rp-ink);
 	}
-	:is(.mkt, .atelic-ui) .rp-tier {
+	.atelic-ui .rp-tier {
 		width: 0.85in;
 		font-family: var(--font-mono);
 		font-size: 7pt;
@@ -687,30 +757,30 @@
 		text-transform: uppercase;
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .rp-section {
+	.atelic-ui .rp-section {
 		width: 1.9in;
 		font-weight: 600;
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .rp-now,
-	:is(.mkt, .atelic-ui) .rp-earlier {
+	.atelic-ui .rp-now,
+	.atelic-ui .rp-earlier {
 		width: 0.65in;
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .rp-grades .op-grade {
+	.atelic-ui .rp-grades .op-grade {
 		margin-left: 0;
 	}
 	/* The earlier letters print muted; this month's is the one judgement. */
-	:is(.mkt, .atelic-ui) .rp-earlier .op-grade {
+	.atelic-ui .rp-earlier .op-grade {
 		opacity: 0.45;
 	}
-	:is(.mkt, .atelic-ui) .rp-moved {
+	.atelic-ui .rp-moved {
 		color: var(--rp-ink-soft);
 		text-wrap: pretty;
 	}
 
 	/* ---- the close ---- */
-	:is(.mkt, .atelic-ui) .rp-close {
+	.atelic-ui .rp-close {
 		margin-top: auto;
 		padding-top: 10pt;
 		border-top: 1px solid var(--rp-rule);
@@ -721,40 +791,40 @@
 
 	/* ---- the column: phones and portrait tablets ---- */
 	@media screen and (max-width: 899px) {
-		:is(.mkt, .atelic-ui) .rp {
+		.atelic-ui .rp {
 			padding: calc(var(--nav-height) + 8px) 0 0;
 		}
-		:is(.mkt, .atelic-ui) .rp-sheet {
+		.atelic-ui .rp-sheet {
 			padding: 22px 18px 24px;
 			border-radius: 0;
 			box-shadow: none;
 		}
-		:is(.mkt, .atelic-ui) .rp-period {
+		.atelic-ui .rp-period {
 			font-size: 11px;
 		}
-		:is(.mkt, .atelic-ui) .rp h1 {
+		.atelic-ui .rp h1 {
 			font-size: 30px;
 			margin: 8px 0 16px;
 		}
-		:is(.mkt, .atelic-ui) .rp-leads {
+		.atelic-ui .rp-leads {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 			gap: 18px 16px;
 			padding: 16px 0 18px;
 		}
-		:is(.mkt, .atelic-ui) .rp-q {
+		.atelic-ui .rp-q {
 			font-size: 11px;
 		}
-		:is(.mkt, .atelic-ui) .rp-figure {
+		.atelic-ui .rp-figure {
 			font-size: 24px;
 		}
-		:is(.mkt, .atelic-ui) .rp-lead p {
+		.atelic-ui .rp-lead p {
 			font-size: 14px;
 			line-height: 1.45;
 		}
-		:is(.mkt, .atelic-ui) .rp-grades {
+		.atelic-ui .rp-grades {
 			font-size: 14px;
 		}
-		:is(.mkt, .atelic-ui) .rp-grades thead {
+		.atelic-ui .rp-grades thead {
 			position: absolute;
 			width: 1px;
 			height: 1px;
@@ -762,7 +832,7 @@
 			clip: rect(0, 0, 0, 0);
 			white-space: nowrap;
 		}
-		:is(.mkt, .atelic-ui) .rp-grades tr {
+		.atelic-ui .rp-grades tr {
 			display: flex;
 			flex-wrap: wrap;
 			align-items: baseline;
@@ -770,36 +840,36 @@
 			padding: 10px 0;
 			border-bottom: 1px solid var(--rp-rule);
 		}
-		:is(.mkt, .atelic-ui) .rp-grades tr.is-tier-start:not(:first-child) {
+		.atelic-ui .rp-grades tr.is-tier-start:not(:first-child) {
 			border-top: 1px solid var(--rp-ink);
 		}
-		:is(.mkt, .atelic-ui) .rp-grades td {
+		.atelic-ui .rp-grades td {
 			display: block;
 			width: auto;
 			padding: 0;
 			border: none;
 		}
-		:is(.mkt, .atelic-ui) .rp-grades tr.is-tier-start:not(:first-child) td {
+		.atelic-ui .rp-grades tr.is-tier-start:not(:first-child) td {
 			border: none;
 		}
 		/* Each row folds to the tier on its own line (first row of a tier
 		   only), the section, the three letters, then what moved. */
-		:is(.mkt, .atelic-ui) .rp-grades .rp-tier,
-		:is(.mkt, .atelic-ui) .rp-grades .rp-section,
-		:is(.mkt, .atelic-ui) .rp-grades .rp-moved {
+		.atelic-ui .rp-grades .rp-tier,
+		.atelic-ui .rp-grades .rp-section,
+		.atelic-ui .rp-grades .rp-moved {
 			width: 100%;
 		}
-		:is(.mkt, .atelic-ui) .rp-tier {
+		.atelic-ui .rp-tier {
 			font-size: 10px;
 		}
-		:is(.mkt, .atelic-ui) .rp-tier:empty {
+		.atelic-ui .rp-tier:empty {
 			display: none;
 		}
-		:is(.mkt, .atelic-ui) .rp-section {
+		.atelic-ui .rp-section {
 			white-space: normal;
 		}
-		:is(.mkt, .atelic-ui) .rp-now::before,
-		:is(.mkt, .atelic-ui) .rp-earlier::before {
+		.atelic-ui .rp-now::before,
+		.atelic-ui .rp-earlier::before {
 			content: attr(data-label);
 			margin-right: 6px;
 			font-family: var(--font-mono);
@@ -808,10 +878,10 @@
 			text-transform: uppercase;
 			color: var(--rp-ink-faint);
 		}
-		:is(.mkt, .atelic-ui) .rp-earlier:empty {
+		.atelic-ui .rp-earlier:empty {
 			display: none;
 		}
-		:is(.mkt, .atelic-ui) .rp-close {
+		.atelic-ui .rp-close {
 			padding-top: 16px;
 			font-size: 13px;
 		}
@@ -829,16 +899,16 @@
 			padding: 0;
 			background: none;
 		}
-		:is(.mkt, .atelic-ui):has(.rp) .nav,
-		:is(.mkt, .atelic-ui):has(.rp) .skip-link,
-		:is(.mkt, .atelic-ui):has(.rp) .credit-bar {
+		.atelic-ui:has(.rp) .nav,
+		.atelic-ui:has(.rp) .skip-link,
+		.atelic-ui:has(.rp) .credit-bar {
 			display: none;
 		}
-		:is(.mkt, .atelic-ui) .rp {
+		.atelic-ui .rp {
 			padding: 0;
 			background: none;
 		}
-		:is(.mkt, .atelic-ui) .rp-sheet {
+		.atelic-ui .rp-sheet {
 			width: 8.5in;
 			height: 11in;
 			max-width: none;
@@ -865,10 +935,10 @@
 
 	   Tokens only (theme.css). The blocks inside a section (the checklist,
 	   the sortable table, the charts, the stat row, the callout, the
-	   collapsible) and their tones are styles/components.css's; this sheet sets
+	   disclosure) and their tones are styles/components.css's; this sheet sets
 	   the document around them and their sizes here.
 	   ================================================================= */
-	:is(.mkt, .atelic-ui) .op {
+	.atelic-ui .op {
 		--op-ink: var(--ink);
 		--op-ink-soft: var(--ink-soft);
 		--op-ink-faint: var(--neutral-500);
@@ -880,11 +950,11 @@
 		background: var(--surface);
 		min-height: 100vh;
 	}
-	:is(.mkt, .atelic-ui) .op a {
+	.atelic-ui .op a {
 		color: inherit;
 		text-decoration: none;
 	}
-	:is(.mkt, .atelic-ui) .op-doc {
+	.atelic-ui .op-doc {
 		max-width: 920px;
 		margin: 0 auto;
 		padding: calc(var(--nav-height) + 22px) 16px 48px;
@@ -895,28 +965,28 @@
 	}
 
 	/* ---- the head: who it is for, what it is ---- */
-	:is(.mkt, .atelic-ui) .op-top {
+	.atelic-ui .op-top {
 		display: none;
 	}
-	:is(.mkt, .atelic-ui) .op-meta {
+	.atelic-ui .op-meta {
 		margin: 0 0 10px;
 		font-family: var(--font-mono);
 		font-size: 12.5px;
 		letter-spacing: 0.04em;
 		color: var(--op-ink-faint);
 	}
-	:is(.mkt, .atelic-ui) .op-meta b {
+	.atelic-ui .op-meta b {
 		font-weight: 500;
 		color: var(--op-ink-soft);
 	}
 	/* On a phone the date takes its own line; wide, it follows a middle dot. */
-	:is(.mkt, .atelic-ui) .op-meta-sep {
+	.atelic-ui .op-meta-sep {
 		display: none;
 	}
-	:is(.mkt, .atelic-ui) .op-meta-date {
+	.atelic-ui .op-meta-date {
 		display: block;
 	}
-	:is(.mkt, .atelic-ui) .op h1 {
+	.atelic-ui .op h1 {
 		font-size: clamp(32px, 5vw, 44px);
 		font-weight: 650;
 		letter-spacing: -0.03em;
@@ -925,7 +995,7 @@
 		text-wrap: balance;
 		color: var(--op-ink);
 	}
-	:is(.mkt, .atelic-ui) .op-intro {
+	.atelic-ui .op-intro {
 		margin: 14px 0 0;
 		max-width: 62ch;
 		font-size: 16.5px;
@@ -935,7 +1005,7 @@
 	}
 
 	/* ---- the grade chip, at web sizes ---- */
-	:is(.mkt, .atelic-ui) .op .op-grade {
+	.atelic-ui .op .op-grade {
 		display: inline-grid;
 		place-items: center;
 		margin: 0;
@@ -954,11 +1024,11 @@
 
 	/* ---- the overview: the key, then every section under its tier, each a
 	   grade, a name that links to the section, and one plain read ---- */
-	:is(.mkt, .atelic-ui) .op-ov {
+	.atelic-ui .op-ov {
 		margin-top: 22px;
 		scroll-margin-top: calc(var(--nav-height) + 16px);
 	}
-	:is(.mkt, .atelic-ui) .op-ov-head {
+	.atelic-ui .op-ov-head {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
@@ -966,7 +1036,7 @@
 		gap: 8px 20px;
 		margin-bottom: 10px;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-title {
+	.atelic-ui .op-ov-title {
 		font-size: 13px;
 		font-family: var(--font-mono);
 		font-weight: 500;
@@ -975,7 +1045,7 @@
 		color: var(--op-ink-faint);
 		margin: 0;
 	}
-	:is(.mkt, .atelic-ui) .op-legend {
+	.atelic-ui .op-legend {
 		list-style: none;
 		margin: 0;
 		padding: 0;
@@ -985,25 +1055,25 @@
 		font-size: 13.5px;
 		color: var(--op-ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .op-legend li {
+	.atelic-ui .op-legend li {
 		display: inline-flex;
 		align-items: center;
 		gap: 7px;
 	}
-	:is(.mkt, .atelic-ui) .op-legend .op-grade {
+	.atelic-ui .op-legend .op-grade {
 		width: 22px;
 		height: 22px;
 		border-radius: 6px;
 		font-size: 12px;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-card {
+	.atelic-ui .op-ov-card {
 		background: var(--op-card);
 		border: 1px solid var(--op-rule);
 		border-radius: var(--radius-md);
 		box-shadow: var(--shadow-sm);
 		overflow: hidden;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-tier-label {
+	.atelic-ui .op-ov-tier-label {
 		padding: 7px 16px;
 		background: var(--surface-alt);
 		font-family: var(--font-mono);
@@ -1012,12 +1082,12 @@
 		text-transform: uppercase;
 		color: var(--op-ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .op-ov-tier ul {
+	.atelic-ui .op-ov-tier ul {
 		list-style: none;
 		margin: 0;
 		padding: 0;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-row {
+	.atelic-ui .op-ov-row {
 		position: relative;
 		display: grid;
 		grid-template-columns: auto minmax(0, 1fr) auto;
@@ -1027,25 +1097,25 @@
 		padding: 12px 12px 12px 16px;
 		border-top: 1px solid var(--op-rule);
 	}
-	:is(.mkt, .atelic-ui) .op-ov-row:hover {
+	.atelic-ui .op-ov-row:hover {
 		background: var(--surface);
 	}
-	:is(.mkt, .atelic-ui) .op-ov-grade {
+	.atelic-ui .op-ov-grade {
 		grid-row: 1 / span 2;
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-grade .op-grade {
+	.atelic-ui .op-ov-grade .op-grade {
 		width: 30px;
 		height: 30px;
 		border-radius: 9px;
 		font-size: 15px;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-before .op-grade {
+	.atelic-ui .op-ov-before .op-grade {
 		opacity: 0.45;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-name {
+	.atelic-ui .op-ov-name {
 		font-size: 16px;
 		font-weight: 650;
 		letter-spacing: -0.01em;
@@ -1054,29 +1124,29 @@
 	}
 	/* The name is the link, and it covers the row; a link inside the read
 	   sits above it. */
-	:is(.mkt, .atelic-ui) .op-ov-name a::after {
+	.atelic-ui .op-ov-name a::after {
 		content: "";
 		position: absolute;
 		inset: 0;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-row:hover .op-ov-name {
+	.atelic-ui .op-ov-row:hover .op-ov-name {
 		color: var(--op-accent);
 	}
-	:is(.mkt, .atelic-ui) .op-ov-read {
+	.atelic-ui .op-ov-read {
 		grid-column: 2;
 		font-size: 15px;
 		line-height: 1.45;
 		color: var(--op-ink-soft);
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-read a {
+	.atelic-ui .op-ov-read a {
 		position: relative;
 		z-index: 1;
 		color: var(--op-accent);
 		text-decoration: underline;
 		text-underline-offset: 2px;
 	}
-	:is(.mkt, .atelic-ui) .op-ov-go {
+	.atelic-ui .op-ov-go {
 		grid-column: 3;
 		grid-row: 1;
 		margin-top: 5px;
@@ -1084,11 +1154,11 @@
 	}
 
 	/* ---- a part: the tier and the question it answers ---- */
-	:is(.mkt, .atelic-ui) .op-part {
+	.atelic-ui .op-part {
 		margin: 34px 0 10px;
 		scroll-margin-top: calc(var(--nav-height) + 16px);
 	}
-	:is(.mkt, .atelic-ui) .op-part h2 {
+	.atelic-ui .op-part h2 {
 		font-size: 27px;
 		font-weight: 650;
 		letter-spacing: -0.025em;
@@ -1096,14 +1166,14 @@
 		margin: 0;
 		color: var(--op-ink);
 	}
-	:is(.mkt, .atelic-ui) .op-part p {
+	.atelic-ui .op-part p {
 		margin: 6px 0 0;
 		font-size: 16.5px;
 		color: var(--op-ink-soft);
 	}
 
 	/* ---- a topic: one section, a card of blocks ---- */
-	:is(.mkt, .atelic-ui) .op-topic {
+	.atelic-ui .op-topic {
 		background: var(--op-card);
 		border: 1px solid var(--op-rule);
 		border-radius: var(--radius-md);
@@ -1112,13 +1182,13 @@
 		margin-top: 12px;
 		scroll-margin-top: calc(var(--nav-height) + 16px);
 	}
-	:is(.mkt, .atelic-ui) .op-topic-head {
+	.atelic-ui .op-topic-head {
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-start;
 		gap: 20px;
 	}
-	:is(.mkt, .atelic-ui) .op-topic h3 {
+	.atelic-ui .op-topic h3 {
 		font-size: 21px;
 		font-weight: 650;
 		letter-spacing: -0.02em;
@@ -1126,21 +1196,21 @@
 		margin: 0;
 		color: var(--op-ink);
 	}
-	:is(.mkt, .atelic-ui) .op-topic h3 a {
+	.atelic-ui .op-topic h3 a {
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
 		border-bottom: 1px solid var(--neutral-200);
 	}
-	:is(.mkt, .atelic-ui) .op-topic h3 a svg {
+	.atelic-ui .op-topic h3 a svg {
 		color: var(--op-ink-faint);
 	}
-	:is(.mkt, .atelic-ui) .op-topic h3 a:hover,
-	:is(.mkt, .atelic-ui) .op-topic h3 a:hover svg {
+	.atelic-ui .op-topic h3 a:hover,
+	.atelic-ui .op-topic h3 a:hover svg {
 		color: var(--op-accent);
 		border-color: var(--op-accent);
 	}
-	:is(.mkt, .atelic-ui) .op-def {
+	.atelic-ui .op-def {
 		margin: 6px 0 0;
 		font-size: 16px;
 		line-height: 1.45;
@@ -1148,18 +1218,18 @@
 		text-wrap: pretty;
 	}
 	/* why the letter: the rule the section met, in a line */
-	:is(.mkt, .atelic-ui) .op-why {
+	.atelic-ui .op-why {
 		margin: 6px 0 0;
 		font-size: 14.5px;
 		line-height: 1.45;
 		color: var(--op-ink-soft);
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .op-why b {
+	.atelic-ui .op-why b {
 		font-weight: 650;
 		color: var(--op-ink);
 	}
-	:is(.mkt, .atelic-ui) .op-topic-head > .op-grade {
+	.atelic-ui .op-topic-head > .op-grade {
 		width: 42px;
 		height: 42px;
 		border-radius: 12px;
@@ -1167,45 +1237,45 @@
 	}
 
 	/* ---- blocks inside a topic, one under another ---- */
-	:is(.mkt, .atelic-ui) .op-blocks {
+	.atelic-ui .op-blocks {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
 	}
-	:is(.mkt, .atelic-ui) .op-block {
+	.atelic-ui .op-block {
 		margin-top: 16px;
 		padding-top: 16px;
 		border-top: 1px solid var(--op-rule);
 		min-width: 0;
 	}
-	:is(.mkt, .atelic-ui) .op-block-head {
+	.atelic-ui .op-block-head {
 		margin-bottom: 12px;
 	}
-	:is(.mkt, .atelic-ui) .op-block-head h4 {
+	.atelic-ui .op-block-head h4 {
 		font-size: 16px;
 		font-weight: 650;
 		letter-spacing: -0.005em;
 		margin: 0;
 		color: var(--op-ink);
 	}
-	:is(.mkt, .atelic-ui) .op-block-head p {
+	.atelic-ui .op-block-head p {
 		margin: 3px 0 0;
 		font-size: 15px;
 		line-height: 1.45;
 		color: var(--op-ink-soft);
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .op-note {
+	.atelic-ui .op-note {
 		margin: 12px 0 0;
 		font-size: 15px;
 		line-height: 1.5;
 		color: var(--op-ink-soft);
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .op-note b {
+	.atelic-ui .op-note b {
 		color: var(--op-ink);
 		font-weight: 600;
 	}
-	:is(.mkt, .atelic-ui) .op-dash {
+	.atelic-ui .op-dash {
 		display: inline-block;
 		width: 14px;
 		height: 1.5px;
@@ -1215,46 +1285,46 @@
 
 	/* The blocks are the shared package's components. These are the writeup's
 	   sizes for them. */
-	:is(.mkt, .atelic-ui) .op-checks .checklist,
-	:is(.mkt, .atelic-ui) .op-scale .threshold-scale {
+	.atelic-ui .op-checks .checklist,
+	.atelic-ui .op-scale .threshold-scale {
 		font-size: 15px;
 	}
-	:is(.mkt, .atelic-ui) .op-bar .chart-key,
-	:is(.mkt, .atelic-ui) .op-columns .chart-key {
+	.atelic-ui .op-bar .chart-key,
+	.atelic-ui .op-columns .chart-key {
 		font-size: 13px;
 	}
 
 	/* the table: its layout is the shared DataTable's; these are the writeup's
 	   own sizes and the two line row names. */
-	:is(.mkt, .atelic-ui) .op-table .data-table {
+	.atelic-ui .op-table .data-table {
 		font-size: 15px;
 	}
-	:is(.mkt, .atelic-ui) .op-table tbody th b {
+	.atelic-ui .op-table tbody th b {
 		display: block;
 		font-weight: 600;
 	}
-	:is(.mkt, .atelic-ui) .op-table tbody th a,
-	:is(.mkt, .atelic-ui) .op-table .op-sub {
+	.atelic-ui .op-table tbody th a,
+	.atelic-ui .op-table .op-sub {
 		display: block;
 		font-family: var(--font-mono);
 		font-size: 12px;
 		color: var(--op-ink-faint);
 		overflow-wrap: anywhere;
 	}
-	:is(.mkt, .atelic-ui) .op-table tbody th a:hover {
+	.atelic-ui .op-table tbody th a:hover {
 		color: var(--op-accent);
 	}
-	:is(.mkt, .atelic-ui) .op-table tr[data-tone="bad"] th b {
+	.atelic-ui .op-table tr[data-tone="bad"] th b {
 		color: var(--tone-bad);
 	}
-	:is(.mkt, .atelic-ui) .op-table td {
+	.atelic-ui .op-table td {
 		white-space: nowrap;
 	}
 	/* A cell of running words wraps; a cell of figures never does. */
-	:is(.mkt, .atelic-ui) .op-table td:has(.op-wrap) {
+	.atelic-ui .op-table td:has(.op-wrap) {
 		white-space: normal;
 	}
-	:is(.mkt, .atelic-ui) .op-mark-cell {
+	.atelic-ui .op-mark-cell {
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
@@ -1262,42 +1332,42 @@
 		font-weight: 600;
 	}
 	/* the icon keeps its size however long the words beside it run */
-	:is(.mkt, .atelic-ui) .op-mark-cell svg {
+	.atelic-ui .op-mark-cell svg {
 		flex: none;
 	}
-	:is(.mkt, .atelic-ui) .op-rating {
+	.atelic-ui .op-rating {
 		display: inline-flex;
 		align-items: center;
 		gap: 4px;
 		font-weight: 600;
 		color: var(--tone, var(--op-ink));
 	}
-	:is(.mkt, .atelic-ui) .op-rating svg {
+	.atelic-ui .op-rating svg {
 		color: var(--tone, var(--tone-warn-fill));
 		fill: currentColor;
 	}
 
 	/* a few big numbers: the shared StatRow, at the writeup's sizes */
-	:is(.mkt, .atelic-ui) .op-stats .stat-row {
+	.atelic-ui .op-stats .stat-row {
 		gap: 18px 28px;
 	}
-	:is(.mkt, .atelic-ui) .op-stats .stat .num {
+	.atelic-ui .op-stats .stat .num {
 		font-size: 28px;
 		font-weight: 700;
 		letter-spacing: -0.02em;
 		line-height: 1.1;
 		color: var(--tone, var(--op-ink));
 	}
-	:is(.mkt, .atelic-ui) .op-stats .stat-delta {
+	.atelic-ui .op-stats .stat-delta {
 		font-size: 13px;
 	}
-	:is(.mkt, .atelic-ui) .op-stats .stat .lbl {
+	.atelic-ui .op-stats .stat .lbl {
 		margin-top: 6px;
 		font-size: 15px;
 	}
 
 	/* pictures on their own: the same size, side by side */
-	:is(.mkt, .atelic-ui) .op-shots-row {
+	.atelic-ui .op-shots-row {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 		gap: 16px;
@@ -1305,39 +1375,42 @@
 		align-items: start;
 	}
 	/* three sit on one line, on a phone as well */
-	:is(.mkt, .atelic-ui) .op-shots-row[data-count="3"] {
+	.atelic-ui .op-shots-row[data-count="3"] {
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 		gap: 12px;
 		max-width: 780px;
 	}
-	:is(.mkt, .atelic-ui) .op-shots-row .op-shot a,
-	:is(.mkt, .atelic-ui) .op-shots-row .op-shot-frame {
+	.atelic-ui .op-shots-row .op-shot a,
+	.atelic-ui .op-shots-row .op-shot-frame {
 		aspect-ratio: 3 / 4;
 		background: var(--surface);
 	}
-	:is(.mkt, .atelic-ui) .op-shots-row .op-shot img {
+	.atelic-ui .op-shots-row .op-shot img {
 		width: 100%;
 		height: 100%;
 		object-fit: contain;
 		object-position: center;
 	}
 
-	/* the collapsible: the shared one, at the writeup's sizes */
-	:is(.mkt, .atelic-ui) .op-more .collapsible-label {
+	/* the native disclosure: the shared one, at the writeup's sizes */
+	.atelic-ui .op-block.disclosure.is-native {
+		border-top: 1px solid var(--op-rule);
+	}
+	.atelic-ui .op-more .disclosure-label {
 		font-size: 16px;
 	}
-	:is(.mkt, .atelic-ui) .op-more .collapsible-summary {
+	.atelic-ui .op-more .disclosure-summary {
 		font-size: 15px;
 		line-height: 1.45;
 	}
-	:is(.mkt, .atelic-ui) .op-more .collapsible-body {
+	.atelic-ui .op-more.is-native > .disclosure-body {
 		margin-top: 0;
 	}
-	:is(.mkt, .atelic-ui) .op-more-body {
+	.atelic-ui .op-more-body {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
 	}
-	:is(.mkt, .atelic-ui) .op-more-body > .op-block:first-child {
+	.atelic-ui .op-more-body > .op-block:first-child {
 		border-top: 0;
 		margin-top: 6px;
 		padding-top: 6px;
@@ -1345,43 +1418,43 @@
 
 	/* findings: the shared Callout, one under another, with the owner's screen
 	   beside them */
-	:is(.mkt, .atelic-ui) .op-findings.has-shots {
+	.atelic-ui .op-findings.has-shots {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
 		gap: 18px;
 		align-items: start;
 	}
-	:is(.mkt, .atelic-ui) .op-findings-list {
+	.atelic-ui .op-findings-list {
 		display: flex;
 		flex-direction: column;
 		gap: 14px;
 	}
-	:is(.mkt, .atelic-ui) .op-findings .callout {
+	.atelic-ui .op-findings .callout {
 		font-size: 15.5px;
 		line-height: 1.5;
 	}
-	:is(.mkt, .atelic-ui) .op-findings .callout a,
-	:is(.mkt, .atelic-ui) .op-note a,
-	:is(.mkt, .atelic-ui) .op-block-head p a {
+	.atelic-ui .op-findings .callout a,
+	.atelic-ui .op-note a,
+	.atelic-ui .op-block-head p a {
 		color: var(--op-accent);
 		text-decoration: underline;
 		text-underline-offset: 2px;
 		overflow-wrap: anywhere;
 	}
-	:is(.mkt, .atelic-ui) .op-shots {
+	.atelic-ui .op-shots {
 		display: flex;
 		flex-direction: column;
 		gap: 14px;
 		max-width: 340px;
 	}
-	:is(.mkt, .atelic-ui) .op-shot {
+	.atelic-ui .op-shot {
 		display: flex;
 		flex-direction: column;
 		gap: 6px;
 		margin: 0;
 	}
-	:is(.mkt, .atelic-ui) .op-shot a,
-	:is(.mkt, .atelic-ui) .op-shot-frame {
+	.atelic-ui .op-shot a,
+	.atelic-ui .op-shot-frame {
 		display: block;
 		width: 100%;
 		border-radius: var(--radius-sm);
@@ -1389,15 +1462,19 @@
 		border: 1px solid var(--neutral-200);
 		background: var(--op-card);
 	}
-	:is(.mkt, .atelic-ui) .op-shot a {
+	.atelic-ui .op-shot a {
 		cursor: zoom-in;
 	}
-	:is(.mkt, .atelic-ui) .op-shot img {
+	/* The expand badge on a linked crop: off here, the note turns it on. */
+	.atelic-ui .op-shot-open {
+		display: none;
+	}
+	.atelic-ui .op-shot img {
 		width: 100%;
 		height: auto;
 		display: block;
 	}
-	:is(.mkt, .atelic-ui) .op-shot-brief {
+	.atelic-ui .op-shot-brief {
 		display: grid;
 		place-items: center;
 		min-height: 140px;
@@ -1409,14 +1486,14 @@
 		padding: 12px;
 		text-align: center;
 	}
-	:is(.mkt, .atelic-ui) .op-shot figcaption {
+	.atelic-ui .op-shot figcaption {
 		font-size: 12.5px;
 		line-height: 1.45;
 		color: var(--op-ink-faint);
 	}
 
 	/* sources: the tools the readings came from */
-	:is(.mkt, .atelic-ui) .op-sources {
+	.atelic-ui .op-sources {
 		margin-top: 16px;
 		padding-top: 12px;
 		border-top: 1px solid var(--op-rule);
@@ -1426,14 +1503,14 @@
 		gap: 6px 16px;
 		font-size: 13.5px;
 	}
-	:is(.mkt, .atelic-ui) .op-sources-label {
+	.atelic-ui .op-sources-label {
 		font-family: var(--font-mono);
 		font-size: 11.5px;
 		letter-spacing: 0.1em;
 		text-transform: uppercase;
 		color: var(--op-ink-faint);
 	}
-	:is(.mkt, .atelic-ui) .op-sources ul {
+	.atelic-ui .op-sources ul {
 		list-style: none;
 		margin: 0;
 		padding: 0;
@@ -1442,20 +1519,20 @@
 		gap: 6px 18px;
 		color: var(--op-ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .op-sources a {
+	.atelic-ui .op-sources a {
 		display: inline-flex;
 		align-items: center;
 		gap: 3px;
 		color: var(--op-accent);
 		font-weight: 550;
 	}
-	:is(.mkt, .atelic-ui) .op-sources a:hover {
+	.atelic-ui .op-sources a:hover {
 		text-decoration: underline;
 		text-underline-offset: 2px;
 	}
 
 	/* ---- the rented line: paid's facts in one line, ungraded ---- */
-	:is(.mkt, .atelic-ui) .op-rented {
+	.atelic-ui .op-rented {
 		display: flex;
 		flex-direction: column;
 		gap: 6px;
@@ -1468,7 +1545,7 @@
 		color: var(--op-ink);
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .op-rented-label {
+	.atelic-ui .op-rented-label {
 		flex: none;
 		font-family: var(--font-mono);
 		font-size: 11.5px;
@@ -1479,17 +1556,17 @@
 
 	/* ---- the markets table: on a phone each market stacks, its letters on
 	   one line with their column's label; wide, it is a table ---- */
-	:is(.mkt, .atelic-ui) .op-markets-table {
+	.atelic-ui .op-markets-table {
 		display: block;
 		width: 100%;
 		margin-top: 18px;
 		font-size: 15px;
 		line-height: 1.4;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-table tbody {
+	.atelic-ui .op-markets-table tbody {
 		display: block;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-table thead {
+	.atelic-ui .op-markets-table thead {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -1497,7 +1574,7 @@
 		clip: rect(0, 0, 0, 0);
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-table tbody tr {
+	.atelic-ui .op-markets-table tbody tr {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
@@ -1506,29 +1583,29 @@
 		padding: 12px 0;
 		border-bottom: 1px solid var(--op-rule);
 	}
-	:is(.mkt, .atelic-ui) .op-markets-table tbody tr:last-child {
+	.atelic-ui .op-markets-table tbody tr:last-child {
 		border-bottom: 0;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-table th,
-	:is(.mkt, .atelic-ui) .op-markets-table td {
+	.atelic-ui .op-markets-table th,
+	.atelic-ui .op-markets-table td {
 		text-align: left;
 		color: var(--op-ink);
 	}
-	:is(.mkt, .atelic-ui) .op-markets-table .op-markets-market,
-	:is(.mkt, .atelic-ui) .op-markets-table .op-markets-read {
+	.atelic-ui .op-markets-table .op-markets-market,
+	.atelic-ui .op-markets-table .op-markets-read {
 		width: 100%;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-market {
+	.atelic-ui .op-markets-market {
 		font-weight: 600;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-place {
+	.atelic-ui .op-markets-place {
 		display: block;
 		font-weight: 400;
 		font-size: 12.5px;
 		color: var(--op-ink-faint);
 	}
-	:is(.mkt, .atelic-ui) .op-markets-col,
-	:is(.mkt, .atelic-ui) .op-markets-label {
+	.atelic-ui .op-markets-col,
+	.atelic-ui .op-markets-label {
 		font-family: var(--font-mono);
 		font-size: 11.5px;
 		font-weight: 400;
@@ -1537,19 +1614,19 @@
 		color: var(--op-ink-soft);
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-label {
+	.atelic-ui .op-markets-label {
 		margin-right: 6px;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-grade {
+	.atelic-ui .op-markets-grade {
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .op-markets-table .op-markets-read {
+	.atelic-ui .op-markets-table .op-markets-read {
 		color: var(--op-ink-soft);
 		text-wrap: pretty;
 	}
 
 	/* ---- the close ---- */
-	:is(.mkt, .atelic-ui) .op-close {
+	.atelic-ui .op-close {
 		margin-top: 44px;
 		padding-top: 22px;
 		border-top: 1px solid var(--neutral-200);
@@ -1561,28 +1638,28 @@
 		line-height: 1.6;
 		color: var(--op-ink-faint);
 	}
-	:is(.mkt, .atelic-ui) .op-close b {
+	.atelic-ui .op-close b {
 		font-weight: 500;
 		color: var(--op-ink);
 	}
 	/* The sign off lockup itself (.op-who, .op-sign) is shared with the monthly
 	   page, so it lives with the shared classes at the head of this sheet. */
-	:is(.mkt, .atelic-ui) .op .op-sign {
+	.atelic-ui .op .op-sign {
 		font-size: 24px;
 		margin-bottom: 8px;
 	}
-	:is(.mkt, .atelic-ui) .op .op-who {
+	.atelic-ui .op .op-who {
 		gap: 14px;
 	}
-	:is(.mkt, .atelic-ui) .op .op-who img {
+	.atelic-ui .op .op-who img {
 		width: 56px;
 		height: 56px;
 	}
 	/* The pointer to the hosted page belongs to the printed copy alone. */
-	:is(.mkt, .atelic-ui) .op-twin {
+	.atelic-ui .op-twin {
 		display: none;
 	}
-	:is(.mkt, .atelic-ui) .op-sr-only {
+	.atelic-ui .op-sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -1596,121 +1673,121 @@
 
 	/* ---- wide: the same page with room ---- */
 	@media print, (min-width: 721px) {
-		:is(.mkt, .atelic-ui) .op-meta-sep,
-		:is(.mkt, .atelic-ui) .op-meta-date {
+		.atelic-ui .op-meta-sep,
+		.atelic-ui .op-meta-date {
 			display: inline;
 		}
-		:is(.mkt, .atelic-ui) .op-doc {
+		.atelic-ui .op-doc {
 			padding: calc(var(--nav-height) + 32px) 24px 64px;
 		}
-		:is(.mkt, .atelic-ui) .op-intro {
+		.atelic-ui .op-intro {
 			font-size: 18px;
 		}
-		:is(.mkt, .atelic-ui) .op-ov-tier-label {
+		.atelic-ui .op-ov-tier-label {
 			padding: 7px 20px;
 		}
-		:is(.mkt, .atelic-ui) .op-ov-row {
+		.atelic-ui .op-ov-row {
 			grid-template-columns: auto 232px minmax(0, 1fr) auto;
 			column-gap: 16px;
 			padding: 11px 14px 11px 20px;
 		}
-		:is(.mkt, .atelic-ui) .op-ov-grade {
+		.atelic-ui .op-ov-grade {
 			grid-row: 1;
 		}
-		:is(.mkt, .atelic-ui) .op-ov-read {
+		.atelic-ui .op-ov-read {
 			grid-column: 3;
 			padding-top: 4px;
 		}
-		:is(.mkt, .atelic-ui) .op-ov-go {
+		.atelic-ui .op-ov-go {
 			grid-column: 4;
 		}
-		:is(.mkt, .atelic-ui) .op-part {
+		.atelic-ui .op-part {
 			margin: 40px 0 12px;
 		}
-		:is(.mkt, .atelic-ui) .op-part h2 {
+		.atelic-ui .op-part h2 {
 			font-size: 30px;
 		}
-		:is(.mkt, .atelic-ui) .op-part p {
+		.atelic-ui .op-part p {
 			font-size: 17px;
 		}
-		:is(.mkt, .atelic-ui) .op-topic {
+		.atelic-ui .op-topic {
 			padding: 22px 26px 18px;
 		}
-		:is(.mkt, .atelic-ui) .op-topic h3 {
+		.atelic-ui .op-topic h3 {
 			font-size: 23px;
 		}
-		:is(.mkt, .atelic-ui) .op-topic-head > .op-grade {
+		.atelic-ui .op-topic-head > .op-grade {
 			width: 46px;
 			height: 46px;
 			border-radius: 13px;
 			font-size: 23px;
 		}
-		:is(.mkt, .atelic-ui) .op-findings.has-shots {
+		.atelic-ui .op-findings.has-shots {
 			grid-template-columns: minmax(0, 1fr) 250px;
 			gap: 28px;
 		}
-		:is(.mkt, .atelic-ui) .op-findings .op-shots {
+		.atelic-ui .op-findings .op-shots {
 			max-width: none;
 		}
-		:is(.mkt, .atelic-ui) .op-rented {
+		.atelic-ui .op-rented {
 			flex-direction: row;
 			align-items: baseline;
 			gap: 16px;
 			padding: 16px 26px;
 		}
-		:is(.mkt, .atelic-ui) .op-close {
+		.atelic-ui .op-close {
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: flex-end;
 		}
 
 		/* the markets as a real table */
-		:is(.mkt, .atelic-ui) .op-markets-table {
+		.atelic-ui .op-markets-table {
 			display: table;
 			border-collapse: collapse;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-table tbody {
+		.atelic-ui .op-markets-table tbody {
 			display: table-row-group;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-table thead {
+		.atelic-ui .op-markets-table thead {
 			position: static;
 			width: auto;
 			height: auto;
 			overflow: visible;
 			clip: auto;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-table tbody tr {
+		.atelic-ui .op-markets-table tbody tr {
 			display: table-row;
 			padding: 0;
 			border: 0;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-table th,
-		:is(.mkt, .atelic-ui) .op-markets-table td {
+		.atelic-ui .op-markets-table th,
+		.atelic-ui .op-markets-table td {
 			display: table-cell;
 			padding: 10px 14px 10px 0;
 			border-bottom: 1px solid var(--op-rule);
 			vertical-align: top;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-table thead th {
+		.atelic-ui .op-markets-table thead th {
 			padding-top: 0;
 			padding-bottom: 8px;
 			border-bottom: 1.5px solid var(--op-ink);
 			vertical-align: bottom;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-table tbody tr:last-child th,
-		:is(.mkt, .atelic-ui) .op-markets-table tbody tr:last-child td {
+		.atelic-ui .op-markets-table tbody tr:last-child th,
+		.atelic-ui .op-markets-table tbody tr:last-child td {
 			border-bottom: 0;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-table .op-markets-market {
+		.atelic-ui .op-markets-table .op-markets-market {
 			width: 170px;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-table .op-markets-read {
+		.atelic-ui .op-markets-table .op-markets-read {
 			width: auto;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-col {
+		.atelic-ui .op-markets-col {
 			width: 64px;
 		}
-		:is(.mkt, .atelic-ui) .op-markets-label {
+		.atelic-ui .op-markets-label {
 			display: none;
 		}
 	}
@@ -1736,32 +1813,32 @@
 		/* The sheet is the page at three quarters size. The zoom sits on the root,
 		   where the browser sizes each block for its page breaks at the printed
 		   size; on the document it measured them full size and broke early. */
-		html:has(:is(.mkt, .atelic-ui) .op-doc) {
+		html:has(.atelic-ui .op-doc) {
 			zoom: 0.74;
 		}
-		:is(.mkt, .atelic-ui) .nav,
-		:is(.mkt, .atelic-ui) .credit-bar,
-		:is(.mkt, .atelic-ui) .skip-link,
-		:is(.mkt, .atelic-ui) .op-ov-go,
-		:is(.mkt, .atelic-ui) .op-topic h3 a svg {
+		.atelic-ui .nav,
+		.atelic-ui .credit-bar,
+		.atelic-ui .skip-link,
+		.atelic-ui .op-ov-go,
+		.atelic-ui .op-topic h3 a svg {
 			display: none;
 		}
-		:is(.mkt, .atelic-ui),
-		:is(.mkt, .atelic-ui) .op {
+		.atelic-ui,
+		.atelic-ui .op {
 			background: none;
 			min-height: 0;
 		}
-		:is(.mkt, .atelic-ui) .op-doc {
+		.atelic-ui .op-doc {
 			max-width: none;
 			padding: 0;
 		}
-		:is(.mkt, .atelic-ui) .op-top {
+		.atelic-ui .op-top {
 			display: flex;
 			align-items: center;
 			gap: 12px;
 			margin-bottom: 18px;
 		}
-		:is(.mkt, .atelic-ui) .op-mark {
+		.atelic-ui .op-mark {
 			font-weight: 600;
 			font-size: 22px;
 			letter-spacing: -0.045em;
@@ -1771,82 +1848,82 @@
 			color: var(--op-ink);
 			font-family: var(--font-brand);
 		}
-		:is(.mkt, .atelic-ui) .op-run {
+		.atelic-ui .op-run {
 			display: inline-block;
 			width: 1.7em;
 			height: 2px;
 			background: linear-gradient(90deg, var(--op-accent), transparent);
 		}
-		:is(.mkt, .atelic-ui) .op-x {
+		.atelic-ui .op-x {
 			font-family: var(--font-mono);
 			font-size: 16px;
 			color: var(--op-ink-faint);
 			line-height: 1;
 		}
-		:is(.mkt, .atelic-ui) .op-recipient {
+		.atelic-ui .op-recipient {
 			height: 30px;
 			width: auto;
 			display: block;
 		}
-		:is(.mkt, .atelic-ui) .op-ov-card,
-		:is(.mkt, .atelic-ui) .op-topic {
+		.atelic-ui .op-ov-card,
+		.atelic-ui .op-topic {
 			box-shadow: none;
 			border-color: var(--neutral-200);
 		}
-		:is(.mkt, .atelic-ui) .op-topic h3 a {
+		.atelic-ui .op-topic h3 a {
 			border-bottom: 0;
 		}
-		/* A small block stays whole; a table or a collapsible may run over a
+		/* A small block stays whole; a table or a disclosure may run over a
 		   page, row by row, with its heading kept beside its first rows. */
-		:is(.mkt, .atelic-ui) .op-ov,
-		:is(.mkt, .atelic-ui) .op-block,
-		:is(.mkt, .atelic-ui) .op-rented,
-		:is(.mkt, .atelic-ui) .op-close,
-		:is(.mkt, .atelic-ui) .op-topic-head,
-		:is(.mkt, .atelic-ui) .op-block-head,
-		:is(.mkt, .atelic-ui) .op-markets-table tr,
-		:is(.mkt, .atelic-ui) .data-table tr {
+		.atelic-ui .op-ov,
+		.atelic-ui .op-block,
+		.atelic-ui .op-rented,
+		.atelic-ui .op-close,
+		.atelic-ui .op-topic-head,
+		.atelic-ui .op-block-head,
+		.atelic-ui .op-markets-table tr,
+		.atelic-ui .data-table tr {
 			break-inside: avoid;
 		}
-		:is(.mkt, .atelic-ui) .op-block.op-table,
-		:is(.mkt, .atelic-ui) .op-block.op-more,
-		:is(.mkt, .atelic-ui) .op-block.op-checks,
-		:is(.mkt, .atelic-ui) .op-block.op-findings,
-		:is(.mkt, .atelic-ui) .op-markets {
+		.atelic-ui .op-block.op-table,
+		.atelic-ui .op-block.op-more,
+		.atelic-ui .op-block.op-checks,
+		.atelic-ui .op-block.op-findings,
+		.atelic-ui .op-markets {
 			break-inside: auto;
 		}
 		/* A list of checks or findings runs over a page item by item, so a
 		   section starts in whatever space the last one left. */
-		:is(.mkt, .atelic-ui) .op-checks .checklist > li,
-		:is(.mkt, .atelic-ui) .op-findings .callout {
+		.atelic-ui .op-checks .checklist > li,
+		.atelic-ui .op-findings .callout {
 			break-inside: avoid;
 		}
-		:is(.mkt, .atelic-ui) .op-part,
-		:is(.mkt, .atelic-ui) .collapsible > summary {
+		.atelic-ui .op-part,
+		.atelic-ui .is-native > .disclosure-head {
 			break-inside: avoid;
 			break-after: avoid;
 		}
-		:is(.mkt, .atelic-ui) .op-topic-head,
-		:is(.mkt, .atelic-ui) .op-block-head,
-		:is(.mkt, .atelic-ui) .collapsible > summary,
-		:is(.mkt, .atelic-ui) .data-table thead {
+		.atelic-ui .op-topic-head,
+		.atelic-ui .op-block-head,
+		.atelic-ui .is-native > .disclosure-head,
+		.atelic-ui .data-table thead {
 			break-after: avoid;
 		}
-		:is(.mkt, .atelic-ui) .op-shot a {
+		.atelic-ui .op-shot a {
 			cursor: auto;
 		}
-		:is(.mkt, .atelic-ui) .op-twin {
+		.atelic-ui .op-twin {
 			display: flex;
 			align-items: center;
 			gap: 14px;
 		}
-		:is(.mkt, .atelic-ui) .op-twin-text {
+		.atelic-ui .op-twin-text {
 			text-align: right;
 			font-family: var(--font-mono);
 			font-size: 12px;
 			letter-spacing: 0.04em;
 		}
-		:is(.mkt, .atelic-ui) .op-twin-text b {
+		.atelic-ui .op-twin-text b {
 			display: block;
 			font-family: var(--font-sans);
 			font-size: 16px;
@@ -1854,7 +1931,7 @@
 			letter-spacing: -0.01em;
 			margin-top: 2px;
 		}
-		:is(.mkt, .atelic-ui) .op-qr {
+		.atelic-ui .op-qr {
 			width: 96px;
 			height: 96px;
 			display: block;
@@ -1863,12 +1940,18 @@
 
 	/* =================================================================
 	   THE NOTE: the first touch set as a page (Note.tsx). A letter, not a
-	   report: one narrow column of running text, read on a phone first.
+	   report, read on a phone first. Its column is the writeup's 920px,
+	   centered under the header with the header's own gutters, and every
+	   line of text runs the column's full width.
 
-	   - Phone first, and the one layout: the two lanes are separate
-	     sections stacked top to bottom at every width and on paper, never
-	     side by side, each finding a Callout with the owner's screen
-	     under it. Wide (721px and up) only gives the page more room.
+	   - The two lanes are separate sections stacked top to bottom at
+	     every width and on paper, never side by side.
+	   - Phone first: a finding is its Callout with the owner's screen
+	     under it. Wide (721px and up) and on paper, a finding with a
+	     screen is one row, the words left and the screen right, top
+	     aligned; the screen's column sizes to the picture, a phone crop
+	     about 260px and a wide card up to 45% of the row. A finding
+	     with no screen takes the full width.
 	   - Print: one letter sheet. The chrome steps aside (the writeup's print
 	     rules already hide the header and the credit band on any artifact
 	     page), the type comes down, and the screens shrink. The note sets
@@ -1881,49 +1964,51 @@
 	   ================================================================= */
 	/* The borrowed .op-shot reads the writeup's own two tokens, mapped here as
 	   the writeup's .op root maps them. */
-	:is(.mkt, .atelic-ui) .nt {
+	.atelic-ui .nt {
 		--op-card: var(--card);
 		--op-ink-faint: var(--neutral-500);
 		font-family: var(--font-sans);
 		color: var(--ink);
 		background: var(--surface);
 	}
-	:is(.mkt, .atelic-ui) .nt-doc {
-		max-width: 760px;
+	/* The writeup's column (.op-doc, 920px), centered under the header and
+	   held off the edges by the header's gutters (chrome.css, .nav-inner). */
+	.atelic-ui .nt-doc {
+		max-width: calc(920px + 2 * var(--gutter));
 		margin: 0 auto;
-		padding: calc(var(--nav-height) + 22px) 18px 48px;
+		padding: calc(var(--nav-height) + 22px) var(--gutter) 48px;
 		font-size: 17px;
 		line-height: 1.6;
 		print-color-adjust: exact;
 		-webkit-print-color-adjust: exact;
 	}
-	:is(.mkt, .atelic-ui) .nt a {
+	.atelic-ui .nt a {
 		color: var(--primary);
 		text-decoration: underline;
 		text-underline-offset: 2px;
 		text-decoration-thickness: 1px;
 		overflow-wrap: anywhere;
 	}
-	:is(.mkt, .atelic-ui) .nt a:hover {
+	.atelic-ui .nt a:hover {
 		text-decoration-thickness: 2px;
 	}
 
 	/* ---- the head: who it is for, then the title ---- */
-	:is(.mkt, .atelic-ui) .nt-meta {
+	.atelic-ui .nt-meta {
 		margin: 0 0 10px;
 		font-family: var(--font-mono);
 		font-size: 12.5px;
 		letter-spacing: 0.04em;
 		color: var(--neutral-500);
 	}
-	:is(.mkt, .atelic-ui) .nt-meta b {
+	.atelic-ui .nt-meta b {
 		font-weight: 500;
 		color: var(--ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .nt-meta-date {
+	.atelic-ui .nt-meta-date {
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .nt h1 {
+	.atelic-ui .nt h1 {
 		font-size: clamp(30px, 6vw, 40px);
 		font-weight: 650;
 		letter-spacing: -0.03em;
@@ -1934,7 +2019,7 @@
 	}
 
 	/* ---- the opener: the letter's first paragraph ---- */
-	:is(.mkt, .atelic-ui) .nt-opener {
+	.atelic-ui .nt-opener {
 		margin: 18px 0 0;
 		font-size: 18px;
 		line-height: 1.6;
@@ -1944,7 +2029,7 @@
 
 	/* ---- the two lanes, each a heading and its findings, one above the
 	   other at every width ---- */
-	:is(.mkt, .atelic-ui) .nt-lanes {
+	.atelic-ui .nt-lanes {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
 		gap: 26px;
@@ -1952,10 +2037,10 @@
 		padding-top: 24px;
 		border-top: 1px solid var(--neutral-100);
 	}
-	:is(.mkt, .atelic-ui) .nt-lane {
+	.atelic-ui .nt-lane {
 		min-width: 0;
 	}
-	:is(.mkt, .atelic-ui) .nt-lane h2 {
+	.atelic-ui .nt-lane h2 {
 		margin: 0 0 14px;
 		font-size: 19px;
 		font-weight: 650;
@@ -1963,7 +2048,7 @@
 		line-height: 1.25;
 		color: var(--ink);
 	}
-	:is(.mkt, .atelic-ui) .nt-findings {
+	.atelic-ui .nt-findings {
 		list-style: none;
 		margin: 0;
 		padding: 0;
@@ -1971,45 +2056,80 @@
 		flex-direction: column;
 		gap: 18px;
 	}
-	:is(.mkt, .atelic-ui) .nt-finding .callout {
+	.atelic-ui .nt-finding .callout {
 		font-size: 16px;
 		line-height: 1.5;
 	}
-	/* The screen sits under its finding, set in from the icon so it lines up
-	   with the words. It keeps its own shape, never wider than the lane and
-	   never so tall it carries the page. */
-	:is(.mkt, .atelic-ui) .nt-finding .op-shot {
+	/* The screen is a thumbnail under its finding, set in from the icon so it
+	   lines up with the words. It keeps its own shape, held to 200px tall and
+	   never the lane's full width; a click opens the full picture. */
+	.atelic-ui .nt-finding .op-shot {
 		margin: 10px 0 0 28px;
 	}
-	:is(.mkt, .atelic-ui) .nt-finding .op-shot a,
-	:is(.mkt, .atelic-ui) .nt-finding .op-shot-frame {
+	.atelic-ui .nt-finding .op-shot a,
+	.atelic-ui .nt-finding .op-shot-frame {
 		width: fit-content;
 		max-width: 100%;
 	}
-	:is(.mkt, .atelic-ui) .nt-finding .op-shot img {
+	.atelic-ui .nt-finding .op-shot img {
 		width: auto;
-		max-width: 100%;
-		max-height: 340px;
+		max-width: min(100%, 280px);
+		max-height: 200px;
+	}
+	/* A linked thumbnail says it opens: the badge in its corner, and the
+	   frame takes the accent on hover and focus. */
+	.atelic-ui .nt-finding .op-shot a {
+		position: relative;
+		color: inherit;
+		text-decoration: none;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
+	}
+	.atelic-ui .nt-finding .op-shot a:hover,
+	.atelic-ui .nt-finding .op-shot a:focus-visible {
+		border-color: var(--primary);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
+	}
+	.atelic-ui .nt-finding .op-shot-open {
+		position: absolute;
+		right: 4px;
+		bottom: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: color-mix(in srgb, var(--ink) 72%, transparent);
+		color: var(--surface);
 	}
-	:is(.mkt, .atelic-ui) .nt-finding .op-shot figcaption {
+	.atelic-ui .nt-finding .op-shot a:hover .op-shot-open,
+	.atelic-ui .nt-finding .op-shot a:focus-visible .op-shot-open {
+		background: var(--primary);
+	}
+	/* The caption wraps to the picture's width and never sets the column's. */
+	.atelic-ui .nt-finding .op-shot figcaption {
+		width: 0;
+		min-width: 100%;
 		font-size: 12.5px;
 		line-height: 1.45;
 		color: var(--neutral-500);
 	}
 
 	/* ---- where the work would start ---- */
-	:is(.mkt, .atelic-ui) .nt-start {
+	.atelic-ui .nt-start {
 		margin-top: 30px;
 		padding-top: 24px;
 		border-top: 1px solid var(--neutral-100);
 	}
-	:is(.mkt, .atelic-ui) .nt-start-lead {
+	.atelic-ui .nt-start-lead {
 		margin: 0 0 10px;
 		font-weight: 650;
 		color: var(--ink);
 	}
 	/* The site base strips list markers; the steps want theirs back. */
-	:is(.mkt, .atelic-ui) .nt-start ul {
+	.atelic-ui .nt-start ul {
 		margin: 0;
 		padding-left: 1.2em;
 		list-style: disc;
@@ -2017,93 +2137,159 @@
 		gap: 8px;
 		color: var(--ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .nt-start li {
+	.atelic-ui .nt-start li {
 		padding-left: 2px;
 	}
-	:is(.mkt, .atelic-ui) .nt-start li::marker {
+	.atelic-ui .nt-start li::marker {
 		color: var(--primary);
 	}
-	:is(.mkt, .atelic-ui) .nt-start b {
+	.atelic-ui .nt-start b {
 		font-weight: 600;
 		color: var(--ink);
 	}
 
 	/* ---- the close: who is writing, the offer, then the sign off ---- */
-	:is(.mkt, .atelic-ui) .nt-close {
+	.atelic-ui .nt-close {
 		margin-top: 30px;
 		padding-top: 24px;
 		border-top: 1px solid var(--neutral-100);
 	}
-	:is(.mkt, .atelic-ui) .nt-close p {
+	.atelic-ui .nt-close p {
 		margin: 0 0 14px;
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .nt-close .op-who {
+	.atelic-ui .nt-close .op-who {
 		margin-top: 22px;
 		gap: 14px;
 		font-size: 14px;
 		line-height: 1.6;
 		color: var(--neutral-500);
 	}
-	:is(.mkt, .atelic-ui) .nt-close .op-who img {
+	.atelic-ui .nt-close .op-who img {
 		width: 56px;
 		height: 56px;
 	}
-	:is(.mkt, .atelic-ui) .nt-close .op-sign {
+	.atelic-ui .nt-close .op-sign {
 		font-size: 24px;
 		margin-bottom: 8px;
 	}
 	/* The sign off's own links read as the writeup's do: quiet, in the text color. */
-	:is(.mkt, .atelic-ui) .nt-close .op-who a {
+	.atelic-ui .nt-close .op-who a {
 		color: inherit;
 		text-decoration: none;
 	}
 
-	/* ---- wide: the same stacked page with room ---- */
+	/* ---- wide: more room, and each screen beside its finding ---- */
 	@media (min-width: 721px) {
-		:is(.mkt, .atelic-ui) .nt-doc {
-			padding: calc(var(--nav-height) + 36px) 24px 64px;
+		.atelic-ui .nt-doc {
+			padding-top: calc(var(--nav-height) + 36px);
+			padding-bottom: 64px;
 		}
-		:is(.mkt, .atelic-ui) .nt-lanes {
+		.atelic-ui .nt-lanes {
 			gap: 32px;
 		}
 	}
 
-	/* ---- print: one letter sheet ---- */
+	/* A finding with a screen is one row: the words left, the screen right,
+	   top aligned. The screen is a thumbnail about as tall as a three line
+	   finding, so a phone crop reads as a tall one about 80px wide and a
+	   wide card as a short wide one; the column shrinks to it, held to 45%
+	   of the row, with room enough for the caption under it. */
+	@media print, (min-width: 721px) {
+		.atelic-ui .nt-finding.has-shot {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) fit-content(45%);
+			column-gap: 32px;
+			align-items: start;
+		}
+		.atelic-ui .nt-finding.has-shot .op-shot {
+			margin: 0;
+			min-width: 150px;
+		}
+		.atelic-ui .nt-finding .op-shot img {
+			max-width: 100%;
+			max-height: 170px;
+		}
+		.atelic-ui .nt-finding .op-shot figcaption {
+			font-size: 12px;
+		}
+	}
+
+	/* ---- print: one letter sheet ----
+	   The rows hold on paper, since they are shorter than the stacked page.
+	   The sheet is the page at the writeup's three quarters, the thumbnails
+	   are held short with room for their captions, and the badge drops. */
 	@media print {
-		html:has(:is(.mkt, .atelic-ui) .nt-doc) {
-			zoom: 0.8;
+		html:has(.atelic-ui .nt-doc) {
+			zoom: 0.74;
 		}
-		:is(.mkt, .atelic-ui) .nt {
+		.atelic-ui .nt {
 			background: none;
 		}
-		:is(.mkt, .atelic-ui) .nt-doc {
+		.atelic-ui .nt-doc {
 			max-width: none;
 			padding: 0;
 			font-size: 15px;
-			line-height: 1.5;
+			line-height: 1.45;
 		}
-		:is(.mkt, .atelic-ui) .nt-opener {
+		.atelic-ui .nt h1 {
+			font-size: 32px;
+		}
+		.atelic-ui .nt-opener {
+			margin-top: 12px;
 			font-size: 16px;
 		}
-		:is(.mkt, .atelic-ui) .nt-lanes,
-		:is(.mkt, .atelic-ui) .nt-start,
-		:is(.mkt, .atelic-ui) .nt-close {
-			margin-top: 20px;
-			padding-top: 16px;
+		.atelic-ui .nt-lanes,
+		.atelic-ui .nt-start,
+		.atelic-ui .nt-close {
+			margin-top: 16px;
+			padding-top: 14px;
+		}
+		.atelic-ui .nt-lanes {
+			gap: 18px;
+		}
+		.atelic-ui .nt-lane h2 {
+			margin-bottom: 10px;
+			break-after: avoid;
 		}
-		:is(.mkt, .atelic-ui) .nt-finding .callout {
+		.atelic-ui .nt-findings {
+			gap: 14px;
+		}
+		.atelic-ui .nt-finding .callout {
 			font-size: 14.5px;
 		}
-		:is(.mkt, .atelic-ui) .nt-finding .op-shot img {
-			max-height: 1.9in;
+		.atelic-ui .nt-finding.has-shot {
+			grid-template-columns: minmax(0, 1fr) fit-content(40%);
+			column-gap: 24px;
+		}
+		.atelic-ui .nt-finding.has-shot .op-shot {
+			min-width: 1.6in;
+		}
+		.atelic-ui .nt-finding .op-shot img {
+			max-height: 1.5in;
+		}
+		.atelic-ui .nt-finding .op-shot-open {
+			display: none;
+		}
+		.atelic-ui .nt-finding .op-shot figcaption {
+			font-size: 11.5px;
+			line-height: 1.35;
 		}
-		:is(.mkt, .atelic-ui) .nt-finding .op-shot a {
+		.atelic-ui .nt-finding .op-shot a {
 			cursor: auto;
 		}
-		:is(.mkt, .atelic-ui) .nt-finding,
-		:is(.mkt, .atelic-ui) .nt-start,
-		:is(.mkt, .atelic-ui) .nt-close {
+		.atelic-ui .nt-start ul {
+			gap: 4px;
+		}
+		.atelic-ui .nt-close p {
+			margin-bottom: 10px;
+		}
+		.atelic-ui .nt-close .op-who {
+			margin-top: 14px;
+		}
+		.atelic-ui .nt-finding,
+		.atelic-ui .nt-start,
+		.atelic-ui .nt-close {
 			break-inside: avoid;
 		}
 	}