@atelic-action/ui 1.0.0 → 2.0.0

package/src/styles/artifact.css

@@ -1,19 +1,18 @@
-/* The artifact documents under src/artifact: the writeup, the monthly page,
-   the sealed document stage, and the grade chip and sign off the first two
-   share. Moved whole from the artifact template, in the order its build
-   bundled them (the shared classes, the stage, the monthly page, the
-   writeup), which the two @page rules depend on: the later one wins, and
-   the writeup's is the later one. The note follows the writeup and sets
-   no @page, so the writeup's stays the one that wins. They sit in the package's layer like
-   every sheet here, so any rule a site writes outside a layer still wins
-   over them whatever its specificity. */
+/* The pieces the artifact documents are built from, under src/artifact: the
+   grade chip, the sign off, the shot, and the shell's logo and print rules. The
+   composed documents (the writeup, the read, the monthly page, the note,
+   and the sealed document stage) and their sheet, with both @page rules,
+   live in @atelic-action/artifact (its styles/documents.css), which a site
+   imports after this one. This sheet sets no @page. Every rule sits in the
+   package's layer like every sheet here, so any rule a site writes outside
+   a layer still wins over it whatever its specificity. */
 @layer atelic-ui {
 	/* =================================================================
-	   SHARED: the vocabulary the writeup and the monthly page both wear,
-	   the grade chip (GradeChip) and the sign off lockup (SignOff). A class
-	   used by more than one route's components lives in the base sheet
-	   chain rather than in a component's stylesheet, so it can never vanish
-	   from a page that does not import the component that defined it.
+	   SHARED: the vocabulary every document wears, the grade chip
+	   (GradeChip), the sign off lockup (SignOff), and the shot (Shot). A
+	   class used by more than one document lives in the base sheet chain
+	   rather than in a component's stylesheet, so it can never vanish from
+	   a page that does not import the component that defined it.
 
 	   Tokens only, with one deliberate literal set: the four grade colors.
 	   ================================================================= */
@@ -36,8 +35,8 @@
 		min-width: 1.6em;
 		text-align: center;
 	}
-	/* The four grade colors are the second deliberate literal set after the
-	   printed sheet's white: a grade reads green, yellow, orange, red
+	/* The four grade colors are a deliberate literal set: a grade reads
+	   green, yellow, orange, red
 	   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. */
@@ -117,1336 +116,10 @@
 		display: none;
 	}
 
-	/* The sealed document stage: the Gate component (Gate.tsx). The sign in
-	   screen and the watermark it shares a vocabulary with live in
-	   styles/gate.css. */
-
-	/* =================================================================
-	   THE SEALED DOCUMENT STAGE: the Gate component (Gate.tsx).
-	   A dark stage derived from the semantic tokens, so a client's
-	   theme.css recolors it. The gate card reuses the login
-	   screen's vocabulary above (eyebrow, headline, lead, form, input,
-	   error); this section only stages it dark and adds the document
-	   classes the decrypted HTML is written against.
-	   ================================================================= */
-	.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));
-		--gs-faint: color-mix(in srgb, var(--surface) 40%, var(--surface-dark));
-		--gs-panel: color-mix(in srgb, var(--surface-dark) 88%, var(--surface));
-		--gs-border: color-mix(in srgb, var(--surface-dark) 72%, var(--surface));
-		--gs-hairline: color-mix(in srgb, var(--surface) 10%, transparent);
-
-		/* The navbar is fixed, so it adds no document height: a stage sized
-		   100svh minus the nav plus a credit bar shorter than the nav leaves
-		   the document shorter than the viewport, and the body's light
-		   background shows beneath the credit bar. The stage therefore owns
-		   the full viewport and clears the nav itself, painting dark edge to
-		   edge behind the bar. */
-		min-height: 100svh;
-		padding-top: var(--nav-height);
-		background: var(--gs-stage);
-		color: var(--gs-bright);
-	}
-
-	/* Overscroll and any sub-viewport rounding still expose the page body at
-	   the edges; a page carrying the stage paints its whole shell dark. */
-	.atelic-ui:has(.gate-stage) {
-		background: var(--surface-dark);
-	}
-
-	/* ---- the gate card, staged dark ---- */
-	.atelic-ui .gate-hall {
-		display: grid;
-		place-items: center;
-		min-height: calc(100svh - var(--nav-height));
-		padding-block: clamp(48px, 9vh, 96px);
-	}
-	.atelic-ui .gate-card {
-		width: 100%;
-		max-width: 520px;
-		margin-inline: auto;
-		padding: clamp(28px, 5vw, 44px);
-		border: 1px solid var(--gs-border);
-		border-radius: var(--radius-lg);
-		background: var(--gs-panel);
-		text-align: center;
-	}
-	.atelic-ui .gate-stage .gate-eyebrow {
-		margin: 0 0 12px;
-		font-size: 12.5px;
-		letter-spacing: 0.02em;
-		color: var(--gs-faint);
-	}
-	.atelic-ui .gate-stage .gate-headline {
-		margin: 0 0 12px;
-		font-family: var(--font-sans);
-		font-weight: 800;
-		letter-spacing: -0.015em;
-		font-size: clamp(26px, 3.4vw, 34px);
-		line-height: 1.12;
-		max-width: none;
-		color: var(--gs-bright);
-	}
-	.atelic-ui .gate-stage .gate-lead {
-		margin: 0 auto 26px;
-		max-width: 42ch;
-		font-size: 15px;
-		line-height: 1.6;
-		color: var(--gs-dim);
-	}
-	.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);
-	}
-	.atelic-ui .gate-stage .gate-input::placeholder {
-		color: var(--gs-faint);
-	}
-	.atelic-ui .gate-stage .gate-input:focus-visible {
-		border-color: var(--primary-bright);
-		box-shadow: 0 0 0 3px var(--primary-focus-ring);
-	}
-	.atelic-ui .gate-stage .gate-error {
-		margin: 20px auto 0;
-		max-width: 46ch;
-		font-size: 14.5px;
-		line-height: 1.55;
-		color: var(--gs-dim);
-		background: none;
-		border: none;
-		padding: 0;
-	}
-
-	/* ---- the document ----
-	   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. */
-	.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);
-	}
-	.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. */
-		color: var(--gs-dim);
-		font-size: 16.5px;
-		line-height: 1.7;
-	}
-	.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;
-	}
-	.atelic-ui .gate-content h2 {
-		margin: 52px 0 14px;
-		font-size: clamp(21px, 2.6vw, 27px);
-		line-height: 1.2;
-		color: var(--gs-bright);
-	}
-	.atelic-ui .gate-content h3 {
-		margin: 28px 0 8px;
-		font-size: 17px;
-		color: var(--gs-bright);
-	}
-	.atelic-ui .gate-content p {
-		margin: 0 0 16px;
-		text-wrap: pretty;
-	}
-	.atelic-ui .gate-content ul {
-		margin: 0 0 16px;
-		padding-left: 22px;
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		list-style: disc;
-	}
-	.atelic-ui .gate-content li {
-		display: list-item;
-		list-style: disc;
-		margin: 0;
-	}
-	.atelic-ui .gate-content li::marker {
-		color: var(--primary-bright);
-	}
-	.atelic-ui .gate-content strong {
-		color: var(--gs-bright);
-		font-weight: 600;
-	}
-	.atelic-ui .gate-content a {
-		color: var(--primary-bright);
-		text-decoration: none;
-		border-bottom: 1px solid currentColor;
-	}
-	.atelic-ui .gate-content hr {
-		margin: 44px 0;
-		border: 0;
-		border-top: 1px solid var(--gs-hairline);
-	}
-	.atelic-ui .gate-meta {
-		margin: 0 0 34px;
-		font-family: var(--font-mono);
-		font-size: 12.5px;
-		color: var(--gs-faint);
-	}
-	.atelic-ui .gate-lede {
-		font-size: 18px;
-		color: var(--gs-bright);
-	}
-
-	/* 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. */
-	.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
-		   row. A proposal's tier row is three builds wide by design. */
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-		gap: 16px;
-		margin: 24px 0 8px;
-	}
-	@media (max-width: 860px) {
-		.atelic-ui .gate-tiers {
-			grid-template-columns: 1fr;
-		}
-	}
-	.atelic-ui .gate-tier {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		padding: 22px;
-		border: 1px solid var(--gs-border);
-		border-radius: var(--radius-lg);
-		background: var(--gs-panel);
-		min-width: 0;
-	}
-	.atelic-ui .gate-tier.is-picked {
-		border-color: color-mix(in srgb, var(--primary-bright) 55%, transparent);
-	}
-	.atelic-ui .gate-tier-name {
-		font-weight: 600;
-		font-size: 17px;
-		color: var(--gs-bright);
-	}
-	.atelic-ui .gate-tier-price {
-		font-family: var(--font-mono);
-		font-size: 21px;
-		color: var(--primary-bright);
-	}
-	.atelic-ui .gate-tier-note {
-		font-size: 14px;
-		line-height: 1.55;
-		color: var(--gs-dim);
-	}
-
-	/* Trade arithmetic on a card: a sum column sitting on the card's left,
-	   digits right-aligned against each other the way a hand total lines
-	   up, with any annotation (the credit's label) to the right of its
-	   figure. Markup:
-
-	     <div class="gate-tier-math">
-	       <span class="gate-tier-was">$7,400</span>
-	       <span class="gate-tier-credit">&minus; $3,660</span>
-	       <span class="gate-tier-mathlabel">install credit</span>
-	       <span class="gate-tier-price">$3,740</span>
-	     </div>
-
-	   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. */
-	.atelic-ui .gate-tier-math {
-		display: grid;
-		grid-template-columns: max-content auto;
-		column-gap: 10px;
-		row-gap: 2px;
-		align-items: baseline;
-		justify-content: start;
-	}
-	.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;
-	}
-	/* 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);
-	}
-	.atelic-ui .gate-tier-was {
-		font-family: var(--font-mono);
-		font-size: 15px;
-		color: var(--gs-faint);
-		text-decoration: line-through;
-	}
-	.atelic-ui .gate-tier-credit {
-		font-family: var(--font-mono);
-		font-size: 14px;
-		color: var(--gs-dim);
-	}
-
-	/* A full width card in the tier grid, for an add-on (a monthly service
-	   under one-time builds) that applies across every column. */
-	.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. */
-	.atelic-ui .gate-content ul.icon-list {
-		list-style: none;
-		margin: 0 0 16px;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
-	.atelic-ui .gate-content ul.icon-list li {
-		display: flex;
-		align-items: flex-start;
-		gap: 12px;
-		margin: 0;
-		list-style: none;
-	}
-	.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. */
-	.atelic-ui .gate-content ol {
-		margin: 0 0 16px;
-		padding-left: 24px;
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-	}
-	.atelic-ui .gate-content ol li {
-		display: list-item;
-		list-style: decimal;
-		margin: 0;
-	}
-	.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. */
-	.atelic-ui .gate-content ul.gate-checks {
-		list-style: none;
-		padding-left: 0;
-	}
-	.atelic-ui .gate-content .gate-checks li {
-		position: relative;
-		list-style: none;
-		padding-left: 26px;
-	}
-	.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. */
-		content: "";
-		position: absolute;
-		left: 0;
-		top: 0.28em;
-		width: 14px;
-		height: 14px;
-		background-color: var(--primary-bright);
-		-webkit-mask:
-			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;
-		mask:
-			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;
-	}
-	.atelic-ui .gate-tier ul.gate-checks {
-		margin: 6px 0 0;
-		display: grid;
-		gap: 8px;
-		font-size: 14px;
-		line-height: 1.5;
-		color: var(--gs-dim);
-	}
-	.atelic-ui .gate-tier .gate-checks li {
-		padding-left: 22px;
-	}
-
-	/* ---- the close: sign off, then the person lockup ---- */
-	.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
-		   on the dark stage. */
-		font-family: var(--font-script);
-		font-size: clamp(38px, 5.5vw, 56px);
-		color: var(--secondary-soft);
-		text-align: center;
-	}
-	.atelic-ui .gate-person {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 18px;
-		text-align: left;
-	}
-	.atelic-ui .gate-person img {
-		width: 88px;
-		height: 88px;
-		border-radius: 50%;
-		object-fit: cover;
-		display: block;
-		flex: none;
-	}
-	.atelic-ui .gate-person-name {
-		display: block;
-		font-weight: 600;
-		font-size: 17px;
-		color: var(--gs-bright);
-	}
-	.atelic-ui .gate-person-role {
-		display: block;
-		margin-top: 4px;
-		font-size: 14px;
-		color: var(--gs-dim);
-	}
-	.atelic-ui .gate-person-role a {
-		color: inherit;
-		border-bottom: 1px solid currentColor;
-	}
-	.atelic-ui .gate-person-mail {
-		display: inline-flex;
-		align-items: center;
-		gap: 7px;
-		margin-top: 8px;
-		font-size: 14px;
-		font-weight: 500;
-		letter-spacing: 0.02em;
-		color: var(--primary-bright);
-		border-bottom: 1px solid currentColor;
-		padding-bottom: 1px;
-	}
-	.atelic-ui .gate-person-mail svg {
-		width: 15px;
-		height: 15px;
-	}
-
-	/* =================================================================
-	   THE MONTHLY PAGE: one letter sheet and its hosted twin. Three
-	   renderings of one DOM, the same as the writeup's:
-
-	   - Screen (wide): the sheet at letter width on the surface, under the
-	     artifact shell's dark header.
-	   - Column (under 900px): the same sheet at phone type sizes; the leads
-	     run two across and each grade row folds into a labeled block.
-	   - Print: exactly one letter sheet, zero page margin, the header and
-	     the credit band dropped. Content that misses the sheet is clipped,
-	     never reflowed, so a print of one sheet is the check.
-
-	   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.
-	   ================================================================= */
-	.atelic-ui .rp {
-		--rp-ink: var(--ink);
-		--rp-ink-soft: var(--ink-soft);
-		--rp-ink-faint: var(--neutral-500);
-		--rp-rule: var(--hairline-strong);
-		--rp-accent: var(--primary);
-		--rp-paper: #ffffff;
-		font-family: var(--font-sans);
-		color: var(--rp-ink);
-		background: var(--surface);
-		padding: calc(var(--nav-height) + 32px) 24px 48px;
-	}
-	.atelic-ui .rp a {
-		color: inherit;
-		text-decoration: none;
-	}
-	.atelic-ui .rp a:hover {
-		color: var(--rp-accent);
-	}
-
-	/* ---- the sheet ---- */
-	.atelic-ui .rp-sheet {
-		width: 8.5in;
-		max-width: 100%;
-		margin: 0 auto;
-		padding: 0.5in 0.65in 0.45in;
-		display: flex;
-		flex-direction: column;
-		background: var(--rp-paper);
-		border-radius: 7px;
-		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
-		print-color-adjust: exact;
-		-webkit-print-color-adjust: exact;
-	}
-
-	/* ---- the title and the period ---- */
-	.atelic-ui .rp-period {
-		font-family: var(--font-mono);
-		font-size: 8pt;
-		letter-spacing: 0.12em;
-		text-transform: uppercase;
-		color: var(--rp-accent);
-	}
-	.atelic-ui .rp h1 {
-		font-family: var(--font-sans);
-		font-size: 25pt;
-		font-weight: 600;
-		letter-spacing: -0.03em;
-		line-height: 1.08;
-		margin: 6pt 0 14pt;
-		text-wrap: balance;
-		color: var(--rp-ink);
-	}
-
-	/* ---- the leads: four questions, each a figure and one sentence ---- */
-	.atelic-ui .rp-leads {
-		display: grid;
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-		gap: 0 16pt;
-		padding: 10pt 0 14pt;
-		border-top: 1.5px solid var(--rp-ink);
-		border-bottom: 1px solid var(--rp-rule);
-	}
-	.atelic-ui .rp-lead {
-		display: flex;
-		flex-direction: column;
-		gap: 3pt;
-		min-width: 0;
-	}
-	.atelic-ui .rp-q {
-		margin: 0;
-		font-family: var(--font-mono);
-		font-size: 7pt;
-		font-weight: 500;
-		letter-spacing: 0.1em;
-		line-height: 1.4;
-		text-transform: uppercase;
-		color: var(--rp-accent);
-	}
-	.atelic-ui .rp-figure {
-		font-size: 18pt;
-		font-weight: 600;
-		letter-spacing: -0.02em;
-		line-height: 1.1;
-		color: var(--rp-ink);
-	}
-	.atelic-ui .rp-lead p {
-		margin: 0;
-		font-size: 8.4pt;
-		line-height: 1.4;
-		color: var(--rp-ink-soft);
-		text-wrap: pretty;
-	}
-
-	/* ---- the seven grades: now, last month, baseline, what moved ---- */
-	.atelic-ui .rp-grades {
-		width: 100%;
-		border-collapse: collapse;
-		margin: 14pt 0 16pt;
-		font-size: 8.4pt;
-		line-height: 1.35;
-	}
-	.atelic-ui .rp-grades th {
-		text-align: left;
-		padding: 0 6pt 4pt 0;
-		border-bottom: 1.5px solid var(--rp-ink);
-		font-family: var(--font-mono);
-		font-size: 6.5pt;
-		font-weight: 500;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		white-space: nowrap;
-		color: var(--rp-ink-faint);
-	}
-	.atelic-ui .rp-grades td {
-		padding: 4pt 6pt 4pt 0;
-		border-bottom: 1px solid var(--rp-rule);
-		vertical-align: top;
-		color: var(--rp-ink);
-	}
-	.atelic-ui .rp-grades tr.is-tier-start:not(:first-child) td {
-		border-top: 1px solid var(--rp-ink);
-	}
-	.atelic-ui .rp-tier {
-		width: 0.85in;
-		font-family: var(--font-mono);
-		font-size: 7pt;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		white-space: nowrap;
-	}
-	.atelic-ui .rp-section {
-		width: 1.9in;
-		font-weight: 600;
-		white-space: nowrap;
-	}
-	.atelic-ui .rp-now,
-	.atelic-ui .rp-earlier {
-		width: 0.65in;
-		white-space: nowrap;
-	}
-	.atelic-ui .rp-grades .op-grade {
-		margin-left: 0;
-	}
-	/* The earlier letters print muted; this month's is the one judgement. */
-	.atelic-ui .rp-earlier .op-grade {
-		opacity: 0.45;
-	}
-	.atelic-ui .rp-moved {
-		color: var(--rp-ink-soft);
-		text-wrap: pretty;
-	}
-
-	/* ---- the close ---- */
-	.atelic-ui .rp-close {
-		margin-top: auto;
-		padding-top: 10pt;
-		border-top: 1px solid var(--rp-rule);
-		font-size: 8pt;
-		line-height: 1.6;
-		color: var(--rp-ink-faint);
-	}
-
-	/* ---- the column: phones and portrait tablets ---- */
-	@media screen and (max-width: 899px) {
-		.atelic-ui .rp {
-			padding: calc(var(--nav-height) + 8px) 0 0;
-		}
-		.atelic-ui .rp-sheet {
-			padding: 22px 18px 24px;
-			border-radius: 0;
-			box-shadow: none;
-		}
-		.atelic-ui .rp-period {
-			font-size: 11px;
-		}
-		.atelic-ui .rp h1 {
-			font-size: 30px;
-			margin: 8px 0 16px;
-		}
-		.atelic-ui .rp-leads {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-			gap: 18px 16px;
-			padding: 16px 0 18px;
-		}
-		.atelic-ui .rp-q {
-			font-size: 11px;
-		}
-		.atelic-ui .rp-figure {
-			font-size: 24px;
-		}
-		.atelic-ui .rp-lead p {
-			font-size: 14px;
-			line-height: 1.45;
-		}
-		.atelic-ui .rp-grades {
-			font-size: 14px;
-		}
-		.atelic-ui .rp-grades thead {
-			position: absolute;
-			width: 1px;
-			height: 1px;
-			overflow: hidden;
-			clip: rect(0, 0, 0, 0);
-			white-space: nowrap;
-		}
-		.atelic-ui .rp-grades tr {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: baseline;
-			gap: 6px 14px;
-			padding: 10px 0;
-			border-bottom: 1px solid var(--rp-rule);
-		}
-		.atelic-ui .rp-grades tr.is-tier-start:not(:first-child) {
-			border-top: 1px solid var(--rp-ink);
-		}
-		.atelic-ui .rp-grades td {
-			display: block;
-			width: auto;
-			padding: 0;
-			border: none;
-		}
-		.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. */
-		.atelic-ui .rp-grades .rp-tier,
-		.atelic-ui .rp-grades .rp-section,
-		.atelic-ui .rp-grades .rp-moved {
-			width: 100%;
-		}
-		.atelic-ui .rp-tier {
-			font-size: 10px;
-		}
-		.atelic-ui .rp-tier:empty {
-			display: none;
-		}
-		.atelic-ui .rp-section {
-			white-space: normal;
-		}
-		.atelic-ui .rp-now::before,
-		.atelic-ui .rp-earlier::before {
-			content: attr(data-label);
-			margin-right: 6px;
-			font-family: var(--font-mono);
-			font-size: 10px;
-			letter-spacing: 0.08em;
-			text-transform: uppercase;
-			color: var(--rp-ink-faint);
-		}
-		.atelic-ui .rp-earlier:empty {
-			display: none;
-		}
-		.atelic-ui .rp-close {
-			padding-top: 16px;
-			font-size: 13px;
-		}
-	}
-
-	/* ---- print: one letter sheet, the document alone ---- */
-	@page {
-		size: letter;
-		margin: 0;
-	}
-	@media print {
-		html,
-		body {
-			margin: 0;
-			padding: 0;
-			background: none;
-		}
-		.atelic-ui:has(.rp) .nav,
-		.atelic-ui:has(.rp) .skip-link,
-		.atelic-ui:has(.rp) .credit-bar {
-			display: none;
-		}
-		.atelic-ui .rp {
-			padding: 0;
-			background: none;
-		}
-		.atelic-ui .rp-sheet {
-			width: 8.5in;
-			height: 11in;
-			max-width: none;
-			margin: 0;
-			overflow: hidden;
-			border-radius: 0;
-			box-shadow: none;
-		}
-	}
-
-	/* =================================================================
-	   THE WRITEUP: a web page first, and the printed copy from the same
-	   page.
-
-	   - Phone first: the base rules are the phone's. Each section is a card
-	     of small blocks in one column; a table's rows stack, each fact
-	     wearing its column's label, so nothing scrolls sideways.
-	   - Wide (721px and up): the same cards with room: the overview on one
-	     line a section, real table columns, the owner's screen beside the
-	     findings.
-	   - Print: the chrome steps aside, the lockup and the pointer to the
-	     hosted page appear, the type comes down, and the cards flow across
-	     letter pages. Nothing is clipped and no block splits across pages.
-
-	   Tokens only (theme.css). The blocks inside a section (the checklist,
-	   the sortable table, the charts, the stat row, the callout, the
-	   disclosure) and their tones are styles/components.css's; this sheet sets
-	   the document around them and their sizes here.
-	   ================================================================= */
-	.atelic-ui .op {
-		--op-ink: var(--ink);
-		--op-ink-soft: var(--ink-soft);
-		--op-ink-faint: var(--neutral-500);
-		--op-rule: var(--neutral-100);
-		--op-accent: var(--primary);
-		--op-card: var(--card);
-		font-family: var(--font-sans);
-		color: var(--op-ink);
-		background: var(--surface);
-		min-height: 100vh;
-	}
-	.atelic-ui .op a {
-		color: inherit;
-		text-decoration: none;
-	}
-	.atelic-ui .op-doc {
-		max-width: 920px;
-		margin: 0 auto;
-		padding: calc(var(--nav-height) + 22px) 16px 48px;
-		font-size: 16px;
-		line-height: 1.5;
-		print-color-adjust: exact;
-		-webkit-print-color-adjust: exact;
-	}
-
-	/* ---- the head: who it is for, what it is ---- */
-	.atelic-ui .op-top {
-		display: none;
-	}
-	.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);
-	}
-	.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. */
-	.atelic-ui .op-meta-sep {
-		display: none;
-	}
-	.atelic-ui .op-meta-date {
-		display: block;
-	}
-	.atelic-ui .op h1 {
-		font-size: clamp(32px, 5vw, 44px);
-		font-weight: 650;
-		letter-spacing: -0.03em;
-		line-height: 1.08;
-		margin: 0;
-		text-wrap: balance;
-		color: var(--op-ink);
-	}
-	.atelic-ui .op-intro {
-		margin: 14px 0 0;
-		max-width: 62ch;
-		font-size: 16.5px;
-		line-height: 1.5;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-
-	/* ---- the grade chip, at web sizes ---- */
-	.atelic-ui .op .op-grade {
-		display: inline-grid;
-		place-items: center;
-		margin: 0;
-		padding: 0;
-		width: 26px;
-		height: 26px;
-		border-radius: 8px;
-		font-family: var(--font-sans);
-		font-size: 14px;
-		font-weight: 700;
-		letter-spacing: 0;
-		line-height: 1;
-		vertical-align: middle;
-		flex: none;
-	}
-
-	/* ---- the overview: the key, then every section under its tier, each a
-	   grade, a name that links to the section, and one plain read ---- */
-	.atelic-ui .op-ov {
-		margin-top: 22px;
-		scroll-margin-top: calc(var(--nav-height) + 16px);
-	}
-	.atelic-ui .op-ov-head {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px 20px;
-		margin-bottom: 10px;
-	}
-	.atelic-ui .op-ov-title {
-		font-size: 13px;
-		font-family: var(--font-mono);
-		font-weight: 500;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--op-ink-faint);
-		margin: 0;
-	}
-	.atelic-ui .op-legend {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px 16px;
-		font-size: 13.5px;
-		color: var(--op-ink-soft);
-	}
-	.atelic-ui .op-legend li {
-		display: inline-flex;
-		align-items: center;
-		gap: 7px;
-	}
-	.atelic-ui .op-legend .op-grade {
-		width: 22px;
-		height: 22px;
-		border-radius: 6px;
-		font-size: 12px;
-	}
-	.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;
-	}
-	.atelic-ui .op-ov-tier-label {
-		padding: 7px 16px;
-		background: var(--surface-alt);
-		font-family: var(--font-mono);
-		font-size: 11.5px;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--op-ink-soft);
-	}
-	.atelic-ui .op-ov-tier ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-	.atelic-ui .op-ov-row {
-		position: relative;
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) auto;
-		column-gap: 12px;
-		row-gap: 2px;
-		align-items: start;
-		padding: 12px 12px 12px 16px;
-		border-top: 1px solid var(--op-rule);
-	}
-	.atelic-ui .op-ov-row:hover {
-		background: var(--surface);
-	}
-	.atelic-ui .op-ov-grade {
-		grid-row: 1 / span 2;
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-	}
-	.atelic-ui .op-ov-grade .op-grade {
-		width: 30px;
-		height: 30px;
-		border-radius: 9px;
-		font-size: 15px;
-	}
-	.atelic-ui .op-ov-before .op-grade {
-		opacity: 0.45;
-	}
-	.atelic-ui .op-ov-name {
-		font-size: 16px;
-		font-weight: 650;
-		letter-spacing: -0.01em;
-		line-height: 1.35;
-		padding-top: 3px;
-	}
-	/* The name is the link, and it covers the row; a link inside the read
-	   sits above it. */
-	.atelic-ui .op-ov-name a::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-	}
-	.atelic-ui .op-ov-row:hover .op-ov-name {
-		color: var(--op-accent);
-	}
-	.atelic-ui .op-ov-read {
-		grid-column: 2;
-		font-size: 15px;
-		line-height: 1.45;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-	.atelic-ui .op-ov-read a {
-		position: relative;
-		z-index: 1;
-		color: var(--op-accent);
-		text-decoration: underline;
-		text-underline-offset: 2px;
-	}
-	.atelic-ui .op-ov-go {
-		grid-column: 3;
-		grid-row: 1;
-		margin-top: 5px;
-		color: var(--neutral-300);
-	}
-
-	/* ---- a part: the tier and the question it answers ---- */
-	.atelic-ui .op-part {
-		margin: 34px 0 10px;
-		scroll-margin-top: calc(var(--nav-height) + 16px);
-	}
-	.atelic-ui .op-part h2 {
-		font-size: 27px;
-		font-weight: 650;
-		letter-spacing: -0.025em;
-		line-height: 1.1;
-		margin: 0;
-		color: var(--op-ink);
-	}
-	.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 ---- */
-	.atelic-ui .op-topic {
-		background: var(--op-card);
-		border: 1px solid var(--op-rule);
-		border-radius: var(--radius-md);
-		box-shadow: var(--shadow-sm);
-		padding: 18px 16px 16px;
-		margin-top: 12px;
-		scroll-margin-top: calc(var(--nav-height) + 16px);
-	}
-	.atelic-ui .op-topic-head {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		gap: 20px;
-	}
-	.atelic-ui .op-topic h3 {
-		font-size: 21px;
-		font-weight: 650;
-		letter-spacing: -0.02em;
-		line-height: 1.2;
-		margin: 0;
-		color: var(--op-ink);
-	}
-	.atelic-ui .op-topic h3 a {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		border-bottom: 1px solid var(--neutral-200);
-	}
-	.atelic-ui .op-topic h3 a svg {
-		color: var(--op-ink-faint);
-	}
-	.atelic-ui .op-topic h3 a:hover,
-	.atelic-ui .op-topic h3 a:hover svg {
-		color: var(--op-accent);
-		border-color: var(--op-accent);
-	}
-	.atelic-ui .op-def {
-		margin: 6px 0 0;
-		font-size: 16px;
-		line-height: 1.45;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-	/* why the letter: the rule the section met, in a line */
-	.atelic-ui .op-why {
-		margin: 6px 0 0;
-		font-size: 14.5px;
-		line-height: 1.45;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-	.atelic-ui .op-why b {
-		font-weight: 650;
-		color: var(--op-ink);
-	}
-	.atelic-ui .op-topic-head > .op-grade {
-		width: 42px;
-		height: 42px;
-		border-radius: 12px;
-		font-size: 21px;
-	}
-
-	/* ---- blocks inside a topic, one under another ---- */
-	.atelic-ui .op-blocks {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-	}
-	.atelic-ui .op-block {
-		margin-top: 16px;
-		padding-top: 16px;
-		border-top: 1px solid var(--op-rule);
-		min-width: 0;
-	}
-	.atelic-ui .op-block-head {
-		margin-bottom: 12px;
-	}
-	.atelic-ui .op-block-head h4 {
-		font-size: 16px;
-		font-weight: 650;
-		letter-spacing: -0.005em;
-		margin: 0;
-		color: var(--op-ink);
-	}
-	.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;
-	}
-	.atelic-ui .op-note {
-		margin: 12px 0 0;
-		font-size: 15px;
-		line-height: 1.5;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-	.atelic-ui .op-note b {
-		color: var(--op-ink);
-		font-weight: 600;
-	}
-	.atelic-ui .op-dash {
-		display: inline-block;
-		width: 14px;
-		height: 1.5px;
-		vertical-align: 0.3em;
-		background: var(--neutral-300);
-	}
-
-	/* The blocks are the shared package's components. These are the writeup's
-	   sizes for them. */
-	.atelic-ui .op-checks .checklist,
-	.atelic-ui .op-scale .threshold-scale {
-		font-size: 15px;
-	}
-	.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. */
-	.atelic-ui .op-table .data-table {
-		font-size: 15px;
-	}
-	.atelic-ui .op-table tbody th b {
-		display: block;
-		font-weight: 600;
-	}
-	.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;
-	}
-	.atelic-ui .op-table tbody th a:hover {
-		color: var(--op-accent);
-	}
-	.atelic-ui .op-table tr[data-tone="bad"] th b {
-		color: var(--tone-bad);
-	}
-	.atelic-ui .op-table td {
-		white-space: nowrap;
-	}
-	/* A cell of running words wraps; a cell of figures never does. */
-	.atelic-ui .op-table td:has(.op-wrap) {
-		white-space: normal;
-	}
-	.atelic-ui .op-mark-cell {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		color: var(--tone);
-		font-weight: 600;
-	}
-	/* the icon keeps its size however long the words beside it run */
-	.atelic-ui .op-mark-cell svg {
-		flex: none;
-	}
-	.atelic-ui .op-rating {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		font-weight: 600;
-		color: var(--tone, var(--op-ink));
-	}
-	.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 */
-	.atelic-ui .op-stats .stat-row {
-		gap: 18px 28px;
-	}
-	.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));
-	}
-	.atelic-ui .op-stats .stat-delta {
-		font-size: 13px;
-	}
-	.atelic-ui .op-stats .stat .lbl {
-		margin-top: 6px;
-		font-size: 15px;
-	}
-
-	/* pictures on their own: the same size, side by side */
-	.atelic-ui .op-shots-row {
-		display: grid;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: 16px;
-		max-width: 520px;
-		align-items: start;
-	}
-	/* three sit on one line, on a phone as well */
-	.atelic-ui .op-shots-row[data-count="3"] {
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-		gap: 12px;
-		max-width: 780px;
-	}
-	.atelic-ui .op-shots-row .op-shot a,
-	.atelic-ui .op-shots-row .op-shot-frame {
-		aspect-ratio: 3 / 4;
-		background: var(--surface);
-	}
-	.atelic-ui .op-shots-row .op-shot img {
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
-		object-position: center;
-	}
-
-	/* 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;
-	}
-	.atelic-ui .op-more .disclosure-summary {
-		font-size: 15px;
-		line-height: 1.45;
-	}
-	.atelic-ui .op-more.is-native > .disclosure-body {
-		margin-top: 0;
-	}
-	.atelic-ui .op-more-body {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-	}
-	.atelic-ui .op-more-body > .op-block:first-child {
-		border-top: 0;
-		margin-top: 6px;
-		padding-top: 6px;
-	}
-
-	/* findings: the shared Callout, one under another, with the owner's screen
-	   beside them */
-	.atelic-ui .op-findings.has-shots {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		gap: 18px;
-		align-items: start;
-	}
-	.atelic-ui .op-findings-list {
-		display: flex;
-		flex-direction: column;
-		gap: 14px;
-	}
-	.atelic-ui .op-findings .callout {
-		font-size: 15.5px;
-		line-height: 1.5;
-	}
-	.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;
-	}
-	.atelic-ui .op-shots {
-		display: flex;
-		flex-direction: column;
-		gap: 14px;
-		max-width: 340px;
-	}
+	/* ---- the shot: the owner's own screen over its caption ----
+	   It reads the writeup's own two tokens (--op-card, --op-ink-faint), which
+	   a document maps on its root, and falls back to the theme's when it sits
+	   outside one. A document sizes it and lays shots out in its own sheet. */
 	.atelic-ui .op-shot {
 		display: flex;
 		flex-direction: column;
@@ -1460,7 +133,7 @@
 		border-radius: var(--radius-sm);
 		overflow: hidden;
 		border: 1px solid var(--neutral-200);
-		background: var(--op-card);
+		background: var(--op-card, var(--card));
 	}
 	.atelic-ui .op-shot a {
 		cursor: zoom-in;
@@ -1474,823 +147,25 @@
 		height: auto;
 		display: block;
 	}
-	.atelic-ui .op-shot-brief {
-		display: grid;
-		place-items: center;
-		min-height: 140px;
-		border: 1px dashed var(--neutral-300);
-		border-radius: var(--radius-sm);
-		font-family: var(--font-mono);
-		font-size: 12px;
-		color: var(--op-ink-faint);
-		padding: 12px;
-		text-align: center;
-	}
 	.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 */
-	.atelic-ui .op-sources {
-		margin-top: 16px;
-		padding-top: 12px;
-		border-top: 1px solid var(--op-rule);
-		display: flex;
-		flex-wrap: wrap;
-		align-items: baseline;
-		gap: 6px 16px;
-		font-size: 13.5px;
-	}
-	.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);
-	}
-	.atelic-ui .op-sources ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px 18px;
-		color: var(--op-ink-soft);
-	}
-	.atelic-ui .op-sources a {
-		display: inline-flex;
-		align-items: center;
-		gap: 3px;
-		color: var(--op-accent);
-		font-weight: 550;
-	}
-	.atelic-ui .op-sources a:hover {
-		text-decoration: underline;
-		text-underline-offset: 2px;
-	}
-
-	/* ---- the rented line: paid's facts in one line, ungraded ---- */
-	.atelic-ui .op-rented {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		margin: 18px 0 0;
-		padding: 16px;
-		background: var(--surface-alt);
-		border-radius: var(--radius-md);
-		font-size: 15.5px;
-		line-height: 1.5;
-		color: var(--op-ink);
-		text-wrap: pretty;
-	}
-	.atelic-ui .op-rented-label {
-		flex: none;
-		font-family: var(--font-mono);
-		font-size: 11.5px;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--op-ink-soft);
-	}
-
-	/* ---- the markets table: on a phone each market stacks, its letters on
-	   one line with their column's label; wide, it is a table ---- */
-	.atelic-ui .op-markets-table {
-		display: block;
-		width: 100%;
-		margin-top: 18px;
-		font-size: 15px;
-		line-height: 1.4;
-	}
-	.atelic-ui .op-markets-table tbody {
-		display: block;
-	}
-	.atelic-ui .op-markets-table thead {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-	}
-	.atelic-ui .op-markets-table tbody tr {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		column-gap: 16px;
-		row-gap: 6px;
-		padding: 12px 0;
-		border-bottom: 1px solid var(--op-rule);
-	}
-	.atelic-ui .op-markets-table tbody tr:last-child {
-		border-bottom: 0;
-	}
-	.atelic-ui .op-markets-table th,
-	.atelic-ui .op-markets-table td {
-		text-align: left;
-		color: var(--op-ink);
-	}
-	.atelic-ui .op-markets-table .op-markets-market,
-	.atelic-ui .op-markets-table .op-markets-read {
-		width: 100%;
-	}
-	.atelic-ui .op-markets-market {
-		font-weight: 600;
-	}
-	.atelic-ui .op-markets-place {
-		display: block;
-		font-weight: 400;
-		font-size: 12.5px;
-		color: var(--op-ink-faint);
-	}
-	.atelic-ui .op-markets-col,
-	.atelic-ui .op-markets-label {
-		font-family: var(--font-mono);
-		font-size: 11.5px;
-		font-weight: 400;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--op-ink-soft);
-		white-space: nowrap;
-	}
-	.atelic-ui .op-markets-label {
-		margin-right: 6px;
-	}
-	.atelic-ui .op-markets-grade {
-		white-space: nowrap;
-	}
-	.atelic-ui .op-markets-table .op-markets-read {
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-
-	/* ---- the close ---- */
-	.atelic-ui .op-close {
-		margin-top: 44px;
-		padding-top: 22px;
-		border-top: 1px solid var(--neutral-200);
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 14px;
-		font-size: 14px;
-		line-height: 1.6;
-		color: var(--op-ink-faint);
-	}
-	.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. */
-	.atelic-ui .op .op-sign {
-		font-size: 24px;
-		margin-bottom: 8px;
-	}
-	.atelic-ui .op .op-who {
-		gap: 14px;
-	}
-	.atelic-ui .op .op-who img {
-		width: 56px;
-		height: 56px;
-	}
-	/* The pointer to the hosted page belongs to the printed copy alone. */
-	.atelic-ui .op-twin {
-		display: none;
-	}
-	.atelic-ui .op-sr-only {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border: 0;
-	}
-
-	/* ---- wide: the same page with room ---- */
-	@media print, (min-width: 721px) {
-		.atelic-ui .op-meta-sep,
-		.atelic-ui .op-meta-date {
-			display: inline;
-		}
-		.atelic-ui .op-doc {
-			padding: calc(var(--nav-height) + 32px) 24px 64px;
-		}
-		.atelic-ui .op-intro {
-			font-size: 18px;
-		}
-		.atelic-ui .op-ov-tier-label {
-			padding: 7px 20px;
-		}
-		.atelic-ui .op-ov-row {
-			grid-template-columns: auto 232px minmax(0, 1fr) auto;
-			column-gap: 16px;
-			padding: 11px 14px 11px 20px;
-		}
-		.atelic-ui .op-ov-grade {
-			grid-row: 1;
-		}
-		.atelic-ui .op-ov-read {
-			grid-column: 3;
-			padding-top: 4px;
-		}
-		.atelic-ui .op-ov-go {
-			grid-column: 4;
-		}
-		.atelic-ui .op-part {
-			margin: 40px 0 12px;
-		}
-		.atelic-ui .op-part h2 {
-			font-size: 30px;
-		}
-		.atelic-ui .op-part p {
-			font-size: 17px;
-		}
-		.atelic-ui .op-topic {
-			padding: 22px 26px 18px;
-		}
-		.atelic-ui .op-topic h3 {
-			font-size: 23px;
-		}
-		.atelic-ui .op-topic-head > .op-grade {
-			width: 46px;
-			height: 46px;
-			border-radius: 13px;
-			font-size: 23px;
-		}
-		.atelic-ui .op-findings.has-shots {
-			grid-template-columns: minmax(0, 1fr) 250px;
-			gap: 28px;
-		}
-		.atelic-ui .op-findings .op-shots {
-			max-width: none;
-		}
-		.atelic-ui .op-rented {
-			flex-direction: row;
-			align-items: baseline;
-			gap: 16px;
-			padding: 16px 26px;
-		}
-		.atelic-ui .op-close {
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: flex-end;
-		}
-
-		/* the markets as a real table */
-		.atelic-ui .op-markets-table {
-			display: table;
-			border-collapse: collapse;
-		}
-		.atelic-ui .op-markets-table tbody {
-			display: table-row-group;
-		}
-		.atelic-ui .op-markets-table thead {
-			position: static;
-			width: auto;
-			height: auto;
-			overflow: visible;
-			clip: auto;
-		}
-		.atelic-ui .op-markets-table tbody tr {
-			display: table-row;
-			padding: 0;
-			border: 0;
-		}
-		.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;
-		}
-		.atelic-ui .op-markets-table thead th {
-			padding-top: 0;
-			padding-bottom: 8px;
-			border-bottom: 1.5px solid var(--op-ink);
-			vertical-align: bottom;
-		}
-		.atelic-ui .op-markets-table tbody tr:last-child th,
-		.atelic-ui .op-markets-table tbody tr:last-child td {
-			border-bottom: 0;
-		}
-		.atelic-ui .op-markets-table .op-markets-market {
-			width: 170px;
-		}
-		.atelic-ui .op-markets-table .op-markets-read {
-			width: auto;
-		}
-		.atelic-ui .op-markets-col {
-			width: 64px;
-		}
-		.atelic-ui .op-markets-label {
-			display: none;
-		}
-	}
-
-	/* ---- print: the same page, on letter paper ---- */
-	@page {
-		size: letter;
-		margin: 0.5in 0.55in 0.6in;
-		@bottom-right {
-			content: counter(page) " / " counter(pages);
-			font-family: ui-monospace, "SF Mono", monospace;
-			font-size: 7.5pt;
-			color: #75858f;
-		}
+		color: var(--op-ink-faint, var(--neutral-500));
 	}
 	@media print {
-		html,
-		body {
-			margin: 0;
-			padding: 0;
-			background: none;
-		}
-		/* 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(.atelic-ui .op-doc) {
-			zoom: 0.74;
-		}
-		.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;
-		}
-		.atelic-ui,
-		.atelic-ui .op {
-			background: none;
-			min-height: 0;
-		}
-		.atelic-ui .op-doc {
-			max-width: none;
-			padding: 0;
-		}
-		.atelic-ui .op-top {
-			display: flex;
-			align-items: center;
-			gap: 12px;
-			margin-bottom: 18px;
-		}
-		.atelic-ui .op-mark {
-			font-weight: 600;
-			font-size: 22px;
-			letter-spacing: -0.045em;
-			display: inline-flex;
-			align-items: center;
-			gap: 0.38em;
-			color: var(--op-ink);
-			font-family: var(--font-brand);
-		}
-		.atelic-ui .op-run {
-			display: inline-block;
-			width: 1.7em;
-			height: 2px;
-			background: linear-gradient(90deg, var(--op-accent), transparent);
-		}
-		.atelic-ui .op-x {
-			font-family: var(--font-mono);
-			font-size: 16px;
-			color: var(--op-ink-faint);
-			line-height: 1;
-		}
-		.atelic-ui .op-recipient {
-			height: 30px;
-			width: auto;
-			display: block;
-		}
-		.atelic-ui .op-ov-card,
-		.atelic-ui .op-topic {
-			box-shadow: none;
-			border-color: var(--neutral-200);
-		}
-		.atelic-ui .op-topic h3 a {
-			border-bottom: 0;
-		}
-		/* 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. */
-		.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;
-		}
-		.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. */
-		.atelic-ui .op-checks .checklist > li,
-		.atelic-ui .op-findings .callout {
-			break-inside: avoid;
-		}
-		.atelic-ui .op-part,
-		.atelic-ui .is-native > .disclosure-head {
-			break-inside: avoid;
-			break-after: avoid;
-		}
-		.atelic-ui .op-topic-head,
-		.atelic-ui .op-block-head,
-		.atelic-ui .is-native > .disclosure-head,
-		.atelic-ui .data-table thead {
-			break-after: avoid;
-		}
 		.atelic-ui .op-shot a {
 			cursor: auto;
 		}
-		.atelic-ui .op-twin {
-			display: flex;
-			align-items: center;
-			gap: 14px;
-		}
-		.atelic-ui .op-twin-text {
-			text-align: right;
-			font-family: var(--font-mono);
-			font-size: 12px;
-			letter-spacing: 0.04em;
-		}
-		.atelic-ui .op-twin-text b {
-			display: block;
-			font-family: var(--font-sans);
-			font-size: 16px;
-			font-weight: 600;
-			letter-spacing: -0.01em;
-			margin-top: 2px;
-		}
-		.atelic-ui .op-qr {
-			width: 96px;
-			height: 96px;
-			display: block;
-		}
-	}
-
-	/* =================================================================
-	   THE NOTE: the first touch set as a page (Note.tsx). A letter, not a
-	   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.
-
-	   - 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
-	     no @page of its own: the writeup's, the later one in this sheet,
-	     sets letter paper for every artifact page.
-
-	   Tokens only. The finding is the shared Callout (styles/components.css),
-	   the screen the writeup's .op-shot, the sign off the shared .op-who;
-	   this sheet sets the letter around them and their sizes here.
-	   ================================================================= */
-	/* The borrowed .op-shot reads the writeup's own two tokens, mapped here as
-	   the writeup's .op root maps them. */
-	.atelic-ui .nt {
-		--op-card: var(--card);
-		--op-ink-faint: var(--neutral-500);
-		font-family: var(--font-sans);
-		color: var(--ink);
-		background: var(--surface);
-	}
-	/* 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) var(--gutter) 48px;
-		font-size: 17px;
-		line-height: 1.6;
-		print-color-adjust: exact;
-		-webkit-print-color-adjust: exact;
-	}
-	.atelic-ui .nt a {
-		color: var(--primary);
-		text-decoration: underline;
-		text-underline-offset: 2px;
-		text-decoration-thickness: 1px;
-		overflow-wrap: anywhere;
-	}
-	.atelic-ui .nt a:hover {
-		text-decoration-thickness: 2px;
-	}
-
-	/* ---- the head: who it is for, then the title ---- */
-	.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);
-	}
-	.atelic-ui .nt-meta b {
-		font-weight: 500;
-		color: var(--ink-soft);
-	}
-	.atelic-ui .nt-meta-date {
-		white-space: nowrap;
-	}
-	.atelic-ui .nt h1 {
-		font-size: clamp(30px, 6vw, 40px);
-		font-weight: 650;
-		letter-spacing: -0.03em;
-		line-height: 1.1;
-		margin: 0;
-		text-wrap: balance;
-		color: var(--ink);
-	}
-
-	/* ---- the opener: the letter's first paragraph ---- */
-	.atelic-ui .nt-opener {
-		margin: 18px 0 0;
-		font-size: 18px;
-		line-height: 1.6;
-		color: var(--ink);
-		text-wrap: pretty;
-	}
-
-	/* ---- the two lanes, each a heading and its findings, one above the
-	   other at every width ---- */
-	.atelic-ui .nt-lanes {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		gap: 26px;
-		margin-top: 30px;
-		padding-top: 24px;
-		border-top: 1px solid var(--neutral-100);
-	}
-	.atelic-ui .nt-lane {
-		min-width: 0;
-	}
-	.atelic-ui .nt-lane h2 {
-		margin: 0 0 14px;
-		font-size: 19px;
-		font-weight: 650;
-		letter-spacing: -0.015em;
-		line-height: 1.25;
-		color: var(--ink);
-	}
-	.atelic-ui .nt-findings {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 18px;
-	}
-	.atelic-ui .nt-finding .callout {
-		font-size: 16px;
-		line-height: 1.5;
-	}
-	/* 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;
-	}
-	.atelic-ui .nt-finding .op-shot a,
-	.atelic-ui .nt-finding .op-shot-frame {
-		width: fit-content;
-		max-width: 100%;
-	}
-	.atelic-ui .nt-finding .op-shot img {
-		width: auto;
-		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);
-	}
-	.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 ---- */
-	.atelic-ui .nt-start {
-		margin-top: 30px;
-		padding-top: 24px;
-		border-top: 1px solid var(--neutral-100);
-	}
-	.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. */
-	.atelic-ui .nt-start ul {
-		margin: 0;
-		padding-left: 1.2em;
-		list-style: disc;
-		display: grid;
-		gap: 8px;
-		color: var(--ink-soft);
-	}
-	.atelic-ui .nt-start li {
-		padding-left: 2px;
-	}
-	.atelic-ui .nt-start li::marker {
-		color: var(--primary);
-	}
-	.atelic-ui .nt-start b {
-		font-weight: 600;
-		color: var(--ink);
-	}
-
-	/* ---- the close: who is writing, the offer, then the sign off ---- */
-	.atelic-ui .nt-close {
-		margin-top: 30px;
-		padding-top: 24px;
-		border-top: 1px solid var(--neutral-100);
-	}
-	.atelic-ui .nt-close p {
-		margin: 0 0 14px;
-		text-wrap: pretty;
-	}
-	.atelic-ui .nt-close .op-who {
-		margin-top: 22px;
-		gap: 14px;
-		font-size: 14px;
-		line-height: 1.6;
-		color: var(--neutral-500);
-	}
-	.atelic-ui .nt-close .op-who img {
-		width: 56px;
-		height: 56px;
-	}
-	.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. */
-	.atelic-ui .nt-close .op-who a {
-		color: inherit;
-		text-decoration: none;
-	}
-
-	/* ---- wide: more room, and each screen beside its finding ---- */
-	@media (min-width: 721px) {
-		.atelic-ui .nt-doc {
-			padding-top: calc(var(--nav-height) + 36px);
-			padding-bottom: 64px;
-		}
-		.atelic-ui .nt-lanes {
-			gap: 32px;
-		}
-	}
-
-	/* 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. */
+	/* ---- print: the shell's chrome steps aside on every artifact page ----
+	   ArtifactShell's header, credit band, and skip link belong to the screen;
+	   a printed document is the page alone. */
 	@media print {
-		html:has(.atelic-ui .nt-doc) {
-			zoom: 0.74;
-		}
-		.atelic-ui .nt {
-			background: none;
-		}
-		.atelic-ui .nt-doc {
-			max-width: none;
-			padding: 0;
-			font-size: 15px;
-			line-height: 1.45;
-		}
-		.atelic-ui .nt h1 {
-			font-size: 32px;
-		}
-		.atelic-ui .nt-opener {
-			margin-top: 12px;
-			font-size: 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;
-		}
-		.atelic-ui .nt-findings {
-			gap: 14px;
-		}
-		.atelic-ui .nt-finding .callout {
-			font-size: 14.5px;
-		}
-		.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 {
+		.atelic-ui .nav,
+		.atelic-ui .credit-bar,
+		.atelic-ui .skip-link {
 			display: none;
 		}
-		.atelic-ui .nt-finding .op-shot figcaption {
-			font-size: 11.5px;
-			line-height: 1.35;
-		}
-		.atelic-ui .nt-finding .op-shot a {
-			cursor: auto;
-		}
-		.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;
-		}
 	}
 }