@hraness/design-kit 0.31.1

package/src/plain-publication.css

@@ -0,0 +1,1241 @@
+/**
+ * Plain publication theme
+ *
+ * An opt-in extension of the plain-site document grammar for sourced indexes,
+ * long-form articles, evidence tables, citations, and related reading. Product
+ * identity stays in copy and optional root modifier classes; this stylesheet
+ * owns the shared publication structure and reading rhythm.
+ */
+.plain-site.plain-publication {
+  --plain-shell-measure: 43rem;
+
+  display: flex;
+  min-height: 100vh;
+  min-height: 100svh;
+  min-height: 100dvh;
+  flex-direction: column;
+  background: var(--plain-background);
+  color: var(--plain-foreground);
+  font-family: var(--font-text);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.plain-site.plain-publication > main {
+  flex: 1 0 auto;
+}
+
+:where(.plain-site.plain-publication a:not(.hraness-design-skip-link)) {
+  color: var(--plain-link);
+  overflow-wrap: anywhere;
+  text-decoration: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.15em;
+}
+
+:where(
+  .plain-site.plain-publication
+    a:not(.hraness-design-skip-link):is(:hover, :focus-visible)
+) {
+  text-decoration: underline;
+}
+
+:where(.plain-site.plain-publication a:not(.hraness-design-skip-link):focus-visible) {
+  border-radius: 1px;
+  outline: 1px dotted currentColor;
+  outline-offset: 3px;
+}
+
+:where(
+  .plain-site.plain-publication
+    a:not(.hraness-design-skip-link):focus:not(:focus-visible)
+) {
+  outline: none;
+}
+
+.plain-site.plain-publication .plain-publication__shell {
+  width: 100%;
+  max-width: var(--plain-shell-measure);
+  margin-inline: auto;
+  padding-right: max(var(--plain-shell-gutter), env(safe-area-inset-right));
+  padding-left: max(var(--plain-shell-gutter), env(safe-area-inset-left));
+}
+
+.plain-site.plain-publication .plain-publication__index-content {
+  margin-block: clamp(2.5rem, 8vh, 5rem);
+}
+
+.plain-site.plain-publication .plain-publication__hero {
+  padding: 0 0 2.25rem;
+}
+
+.plain-site.plain-publication .plain-publication__eyebrow,
+.plain-site.plain-publication .plain-publication__entry-label,
+.plain-site.plain-publication .plain-publication__entry-meta,
+.plain-site.plain-publication .plain-publication__article-meta {
+  margin: 0;
+  color: var(--plain-muted);
+  font: inherit;
+  font-size: var(--hraness-type-caption-size, .9375rem);
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: inherit;
+  text-transform: none;
+}
+
+.plain-site.plain-publication .plain-publication__hero h1,
+.plain-site.plain-publication .plain-publication__article-header h1 {
+  max-width: none;
+  margin: 0.4rem 0 0.8rem;
+  color: var(--plain-foreground);
+  font-family: var(--hraness-type-heading-font, var(--font-heading));
+  font-size: var(--hraness-type-h1-size, clamp(2.25rem, 1.8rem + 1.6vw, 3rem));
+  font-weight: var(--hraness-type-heading-weight, 700);
+  letter-spacing: -0.025em;
+  line-height: 1.08;
+  text-wrap: balance;
+}
+
+.plain-site.plain-publication .plain-publication__hero > p:not(.plain-publication__eyebrow),
+.plain-site.plain-publication .plain-publication__article-dek {
+  max-width: none;
+  margin: 0;
+  color: var(--plain-muted);
+  font-size: 1rem;
+  line-height: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__primary-link {
+  display: inline-block;
+  min-height: 0;
+  margin-top: 1rem;
+  padding: 0;
+  background: transparent;
+  color: var(--plain-link);
+  font: inherit;
+  font-weight: 400;
+}
+
+.plain-site.plain-publication .plain-publication__primary-link:is(:hover, :focus-visible) {
+  background: transparent;
+}
+
+.plain-site.plain-publication .plain-publication__primary-link + p {
+  margin-top: 0.5rem;
+}
+
+.plain-site.plain-publication .plain-publication__list,
+.plain-site.plain-publication .plain-publication__method,
+.plain-site.plain-publication .plain-publication__related {
+  padding-block: 2rem;
+  border-top: 1px solid var(--plain-line);
+}
+
+.plain-site.plain-publication .plain-publication__section-heading {
+  display: block;
+  margin: 0 0 0.85rem;
+}
+
+.plain-site.plain-publication .plain-publication__section-heading h2,
+.plain-site.plain-publication .plain-publication__method > h2,
+.plain-site.plain-publication .plain-publication__cta h2,
+.plain-site.plain-publication .plain-publication__sources h2 {
+  margin: 0;
+  color: var(--plain-foreground);
+  /* Section labels: the shared h3 text-face scale, never a small display face. */
+  font-family: var(--hraness-type-h3-font, var(--font-text, inherit));
+  font-size: var(--hraness-type-h3-size, clamp(1.25rem, 1.15rem + .4vw, 1.4375rem));
+  font-weight: var(--hraness-type-h3-weight, 650);
+  letter-spacing: 0;
+  line-height: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__section-heading p,
+.plain-site.plain-publication .plain-publication__section-heading > a {
+  margin: 0.2rem 0 0;
+  color: var(--plain-muted);
+  font: inherit;
+  font-size: var(--hraness-type-caption-size, .9375rem);
+}
+
+.plain-site.plain-publication .plain-publication__article-list {
+  border-bottom: 1px solid var(--plain-line);
+}
+
+.plain-site.plain-publication .plain-publication__entry {
+  display: block;
+  padding: 1.15rem 0;
+  border-top: 1px solid var(--plain-line);
+}
+
+.plain-site.plain-publication .plain-publication__entry h3 {
+  max-width: none;
+  margin: 0.15rem 0 0;
+  color: var(--plain-foreground);
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.35;
+}
+
+@media (pointer: coarse) {
+  .plain-site.plain-publication :is(
+    .plain-publication__entry h3 a,
+    .plain-publication__primary-link,
+    .plain-publication__related-grid > a
+  ) {
+    align-items: center;
+    display: flex;
+    min-block-size: var(--interactive-target-min, 48px);
+    min-inline-size: var(--interactive-target-min, 48px);
+  }
+}
+
+:root[data-verification-pointer="coarse"]
+  .plain-site.plain-publication
+  :is(
+    .plain-publication__entry h3 a,
+    .plain-publication__primary-link,
+    .plain-publication__related-grid > a
+  ) {
+  align-items: center;
+  display: flex;
+  min-block-size: var(--interactive-target-min, 48px);
+  min-inline-size: var(--interactive-target-min, 48px);
+}
+
+.plain-site.plain-publication .plain-publication__entry h3 + p {
+  max-width: none;
+  margin: 0.45rem 0 0;
+  color: var(--plain-muted);
+  font-size: 0.95rem;
+  line-height: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__entry-meta {
+  margin-top: 0.45rem;
+}
+
+.plain-site.plain-publication .plain-publication__method > h2 {
+  margin: 0.2rem 0 0.8rem;
+}
+
+.plain-site.plain-publication .plain-publication__method-grid {
+  display: block;
+  border: 0;
+  background: transparent;
+}
+
+.plain-site.plain-publication .plain-publication__method-grid > div {
+  padding: 0;
+  background: transparent;
+}
+
+.plain-site.plain-publication .plain-publication__method-grid > div + div {
+  margin-top: 1rem;
+}
+
+.plain-site.plain-publication .plain-publication__method-grid h3 {
+  margin: 0;
+  color: var(--plain-foreground);
+  font: inherit;
+  font-family: var(--font-heading);
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.plain-site.plain-publication .plain-publication__method-grid p,
+.plain-site.plain-publication .plain-publication__disclosure {
+  margin: 0.15rem 0 0;
+  color: var(--plain-muted);
+  font-size: 0.95rem;
+  line-height: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__disclosure {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--plain-line);
+}
+
+.plain-site.plain-publication .plain-publication__article-header {
+  padding-block: clamp(2.5rem, 8vh, 4.5rem) 1.75rem;
+}
+
+.plain-site.plain-publication .plain-publication__breadcrumbs {
+  margin-bottom: 1.5rem;
+  font: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__breadcrumbs ol {
+  color: var(--plain-muted);
+  font: inherit;
+  font-size: var(--hraness-type-caption-size, .9375rem);
+}
+
+.plain-site.plain-publication .plain-publication__breadcrumbs li:last-child {
+  max-width: min(30rem, 55vw);
+  min-width: 0;
+}
+
+.plain-site.plain-publication .plain-publication__breadcrumbs [aria-current="page"] {
+  display: block;
+  overflow: hidden;
+  color: var(--plain-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.plain-site.plain-publication .plain-publication__article-dek {
+  margin-top: 0.8rem;
+}
+
+.plain-site.plain-publication .plain-publication__article-meta {
+  margin-top: 0.8rem;
+}
+
+.plain-site.plain-publication .plain-publication__article-layout {
+  display: block;
+  padding-block: 1.5rem 3.5rem;
+  border-top: 1px solid var(--plain-line);
+}
+
+.plain-site.plain-publication .plain-publication__toc {
+  position: static;
+  margin-bottom: 2rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid var(--plain-line);
+  color: var(--plain-muted);
+  font: inherit;
+  font-size: var(--hraness-type-caption-size, .9375rem);
+}
+
+.plain-site.plain-publication .plain-publication__toc p {
+  margin: 0 0 0.35rem;
+  color: var(--plain-foreground);
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.plain-site.plain-publication .plain-publication__toc ol {
+  display: block;
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.plain-site.plain-publication .plain-publication__toc li + li {
+  margin-top: 0.2rem;
+}
+
+.plain-site.plain-publication .plain-publication__article-body {
+  color: var(--plain-foreground);
+  font-size: var(--hraness-type-reading-size, clamp(1rem, .95rem + .25vw, 1.0625rem));
+  line-height: var(--hraness-type-reading-leading, 1.7);
+  max-inline-size: var(--hraness-type-reading-measure, 70ch);
+}
+
+.plain-site.plain-publication .plain-publication__article-body > :first-child {
+  margin-top: 0;
+}
+
+.plain-site.plain-publication .plain-publication__article-body h2,
+.plain-site.plain-publication .plain-publication__article-body h3 {
+  color: var(--plain-foreground);
+  font-family: var(--hraness-type-h2-font, var(--hraness-type-heading-font, var(--font-heading, inherit)));
+  font-weight: var(--hraness-type-h2-weight, var(--hraness-type-heading-weight, 700));
+  letter-spacing: 0;
+  scroll-margin-block-start: calc(var(--hraness-sticky-offset, 0px) + 1.5rem);
+  text-wrap: pretty;
+}
+
+.plain-site.plain-publication .plain-publication__article-body h2 {
+  margin: var(--hraness-type-section-space, 3rem) 0 0.6rem;
+  font-size: var(--hraness-type-h2-size, clamp(1.75rem, 1.45rem + .9vw, 2.125rem));
+  line-height: 1.16;
+  letter-spacing: -0.018em;
+}
+
+.plain-site.plain-publication .plain-publication__article-body h3 {
+  margin: var(--hraness-type-subsection-space, 2rem) 0 0.45rem;
+  font-family: var(--hraness-type-h3-font, var(--font-text, inherit));
+  font-size: var(--hraness-type-h3-size, clamp(1.25rem, 1.15rem + .4vw, 1.4375rem));
+  font-weight: var(--hraness-type-h3-weight, 650);
+  line-height: 1.28;
+  letter-spacing: -0.01em;
+}
+
+.plain-site.plain-publication .plain-publication__article-body :is(h4, h5, h6) {
+  margin: 1.6rem 0 0.4rem;
+  color: var(--plain-foreground);
+  font-family: var(--hraness-type-h4-font, var(--font-text, inherit));
+  font-size: var(--hraness-type-h4-size, 1.0625rem);
+  font-weight: var(--hraness-type-h4-weight, 650);
+  line-height: 1.4;
+  scroll-margin-block-start: calc(var(--hraness-sticky-offset, 0px) + 1.5rem);
+}
+
+.plain-site.plain-publication .plain-publication__article-body :is(h1, h2, h3, h4) + :is(h2, h3, h4) {
+  margin-block-start: 0.75rem;
+}
+
+.plain-site.plain-publication .plain-publication__article-body p {
+  margin: 0 0 1.15rem;
+  text-wrap: pretty;
+}
+
+.plain-site.plain-publication .plain-publication__article-body pre {
+  max-inline-size: 100%;
+  overflow-x: auto;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--hraness-type-code-size, .9rem);
+  line-height: 1.65;
+  tab-size: 2;
+  white-space: pre;
+  overflow-wrap: normal;
+}
+
+.plain-site.plain-publication .plain-publication__article-body :not(pre) > code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: .9em;
+  overflow-wrap: anywhere;
+}
+
+.plain-site.plain-publication .plain-publication__article-body strong,
+.plain-site.plain-publication .plain-publication__article-body em {
+  color: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__article-body ul,
+.plain-site.plain-publication .plain-publication__article-body ol {
+  display: block;
+  margin: 0 0 1.25rem;
+  padding-left: 1.35rem;
+}
+
+.plain-site.plain-publication .plain-publication__article-body li + li {
+  margin-top: 0.35rem;
+}
+
+.plain-site.plain-publication .plain-publication__article-body li::marker {
+  color: var(--plain-muted);
+  font: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__callout {
+  margin: 1.5rem 0;
+  padding: 1rem 1.1rem;
+  border-left: 2px solid var(--plain-line);
+  background: var(--plain-surface);
+}
+
+.plain-site.plain-publication .plain-publication__callout > strong {
+  display: block;
+  margin-bottom: 0.35rem;
+  color: var(--plain-foreground);
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.plain-site.plain-publication .plain-publication__callout p {
+  margin: 0;
+}
+
+.plain-site.plain-publication .plain-publication__table-scroll {
+  max-width: 100%;
+  margin: 1.5rem 0;
+  overflow-x: auto;
+  border-block: 1px solid var(--plain-line);
+}
+
+.plain-site.plain-publication .plain-publication__table {
+  width: 100%;
+  min-width: 40rem;
+  border-collapse: collapse;
+  color: var(--plain-foreground);
+  font-size: .9375rem;
+  line-height: 1.5;
+}
+
+.plain-site.plain-publication .plain-publication__table caption {
+  padding: 0.75rem 0;
+  color: var(--plain-foreground);
+  font: inherit;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-align: left;
+  text-transform: none;
+}
+
+.plain-site.plain-publication .plain-publication__table th,
+.plain-site.plain-publication .plain-publication__table td {
+  padding: 0.65rem;
+  border-top: 1px solid var(--plain-line);
+  text-align: left;
+  vertical-align: top;
+}
+
+.plain-site.plain-publication .plain-publication__table th {
+  color: var(--plain-muted);
+  font: inherit;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.plain-site.plain-publication .plain-publication__table tbody th {
+  color: var(--plain-foreground);
+}
+
+.plain-site.plain-publication .plain-publication__cta {
+  margin-top: 2.5rem;
+  padding: 1.5rem 0;
+  border-block: 1px solid var(--plain-line);
+  background: transparent;
+}
+
+.plain-site.plain-publication .plain-publication__cta h2 {
+  margin-top: 0.2rem;
+}
+
+.plain-site.plain-publication .plain-publication__cta > p:not(.plain-publication__eyebrow) {
+  max-width: none;
+  margin: 0.4rem 0 0;
+  color: var(--plain-muted);
+  font-size: 0.95rem;
+  line-height: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__sources {
+  margin-top: 2.5rem;
+  padding-top: 0;
+  border-top: 0;
+}
+
+.plain-site.plain-publication .plain-publication__sources ol {
+  display: block;
+  margin: 0.75rem 0 0;
+  padding-left: 1.35rem;
+  color: var(--plain-muted);
+  font: inherit;
+  font-size: var(--hraness-type-caption-size, .9375rem);
+}
+
+.plain-site.plain-publication .plain-publication__sources li + li {
+  margin-top: 0.75rem;
+}
+
+.plain-site.plain-publication .plain-publication__sources a,
+.plain-site.plain-publication .plain-publication__sources span {
+  display: block;
+  font: inherit;
+  line-height: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__sources span {
+  margin-top: 0.15rem;
+  color: var(--plain-muted);
+}
+
+.plain-site.plain-publication .plain-publication__related-grid {
+  display: block;
+  border-bottom: 1px solid var(--plain-line);
+  background: transparent;
+}
+
+/* One row per related product, as on the hraness.com project index: mark,
+ * name, and one-line description at reading size. */
+.plain-site.plain-publication .plain-publication__related-grid > a {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  min-height: 0;
+  padding: 0.9rem 0;
+  border-top: 1px solid var(--plain-line);
+  background: transparent;
+}
+
+.plain-site.plain-publication .plain-publication__related-grid > a:hover {
+  background: transparent;
+}
+
+.plain-site.plain-publication .plain-publication__related-mark {
+  flex: 0 0 auto;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  object-fit: contain;
+}
+
+.plain-site.plain-publication .plain-publication__related-text {
+  display: grid;
+  gap: 0.2rem;
+  min-inline-size: 0;
+}
+
+.plain-site.plain-publication .plain-publication__related-text > span,
+.plain-site.plain-publication .plain-publication__related-text > strong {
+  display: block;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-transform: none;
+}
+
+.plain-site.plain-publication .plain-publication__related-text > strong {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.plain-site.plain-publication .plain-publication__related-text > span {
+  color: var(--plain-muted);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+@media (max-width: 42rem) {
+  .plain-site.plain-publication {
+    --plain-shell-gutter: 1rem;
+  }
+
+  .plain-site.plain-publication .plain-publication__breadcrumbs li:last-child {
+    max-width: 12rem;
+  }
+}
+
+@media (forced-colors: active) {
+  .plain-site.plain-publication :where(
+    .plain-publication__list,
+    .plain-publication__method,
+    .plain-publication__related,
+    .plain-publication__article-layout,
+    .plain-publication__toc,
+    .plain-publication__table-scroll,
+    .plain-publication__table th,
+    .plain-publication__table td,
+    .plain-publication__cta,
+    .plain-publication__article-list,
+    .plain-publication__entry,
+    .plain-publication__related-grid,
+    .plain-publication__related-grid > a
+  ) {
+    border-color: CanvasText;
+  }
+
+  .plain-site.plain-publication .plain-publication__callout {
+    border-left-color: CanvasText;
+    background: Canvas;
+  }
+}
+
+/* Article layer
+ *
+ * MarketingArticle, ArticleIndex, and the static renderArticleHtml and
+ * renderArticleIndexHtml functions emit a `plain-publication--embedded`
+ * root. It carries the publication grammar into any host page: on its own it
+ * follows the host's semantic color roles and inherits the host's text face;
+ * nested in a plain page it keeps that page's resolved plain colors. Long-form
+ * prose keeps a 68ch measure, with the contents list beside the body on wide
+ * screens and above it on phones.
+ */
+.plain-site.plain-publication.plain-publication--embedded {
+  --plain-background: transparent;
+  --plain-foreground: var(--foreground, CanvasText);
+  --plain-link: var(--primary, LinkText);
+  --plain-line: color-mix(in srgb, var(--foreground, CanvasText) 14%, transparent);
+  --plain-muted: var(--muted, GrayText);
+  --plain-surface: color-mix(in srgb, var(--foreground, CanvasText) 5%, transparent);
+  --plain-syntax-keyword: var(--warning, CanvasText);
+  --plain-syntax-string: var(--success, CanvasText);
+  --plain-syntax-number: var(--danger, CanvasText);
+  --plain-syntax-name: var(--info, CanvasText);
+  --plain-article-measure: 68ch;
+  --plain-article-aside: 14rem;
+  --plain-article-column-gap: 3rem;
+
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-height: 0;
+  max-inline-size: calc(var(--plain-article-measure) + 2 * var(--plain-shell-gutter));
+  margin-inline: auto;
+  padding-right: max(var(--plain-shell-gutter), env(safe-area-inset-right));
+  padding-left: max(var(--plain-shell-gutter), env(safe-area-inset-left));
+  font-family: inherit;
+  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
+}
+
+.plain-site .plain-site.plain-publication.plain-publication--embedded {
+  --plain-background: inherit;
+  --plain-foreground: inherit;
+  --plain-link: inherit;
+  --plain-line: inherit;
+  --plain-muted: inherit;
+  --plain-surface: inherit;
+  --plain-syntax-keyword: inherit;
+  --plain-syntax-string: inherit;
+  --plain-syntax-number: inherit;
+  --plain-syntax-name: inherit;
+}
+
+.plain-site.plain-publication.plain-publication--embedded :is(
+  .plain-publication__article-header,
+  .plain-publication__article-footer
+) {
+  max-inline-size: var(--plain-article-measure);
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-meta {
+  display: block;
+  margin-top: 1rem;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__byline a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-decoration-thickness: 1px;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__provenance {
+  margin: 0.5rem 0 0;
+  color: var(--plain-muted);
+  font-size: var(--hraness-type-caption-size, .9375rem);
+  line-height: 1.5;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body {
+  font-size: inherit;
+  max-inline-size: var(--plain-article-measure);
+  overflow-wrap: break-word;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a {
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a:is(:hover, :focus-visible) {
+  text-decoration-color: currentColor;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body pre {
+  margin: 1.5rem 0;
+  padding: 0.9rem 1rem;
+  border: 1px solid var(--plain-line);
+  border-radius: 0.5rem;
+  background: var(--plain-surface);
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body :not(pre) > code {
+  padding: 0.1em 0.3em;
+  border-radius: 0.25em;
+  background: var(--plain-surface);
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body blockquote {
+  margin: 1.5rem 0;
+  padding-inline-start: 1rem;
+  border-inline-start: 2px solid var(--plain-line);
+  color: var(--plain-muted);
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure {
+  margin: 2rem 0;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body img,
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body video {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body > :is(img, video),
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure > :is(img, video, svg) {
+  display: block;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure > :is(img, video) {
+  border-radius: 0.5rem;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figcaption {
+  margin-top: 0.6rem;
+  color: var(--plain-muted);
+  font-size: var(--hraness-type-caption-size, .9375rem);
+  line-height: 1.5;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table) {
+  inline-size: 100%;
+  margin: 1.5rem 0;
+  border-collapse: collapse;
+  font-size: var(--hraness-type-caption-size, .9375rem);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table) :is(th, td) {
+  padding: 0.55rem 0.65rem 0.55rem 0;
+  border-top: 1px solid var(--plain-line);
+  overflow-wrap: break-word;
+  text-align: start;
+  vertical-align: top;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table) thead th {
+  border-top: 0;
+  color: var(--plain-muted);
+  font-weight: 700;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure:has(> table) {
+  max-inline-size: 100%;
+  overflow-x: auto;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__table {
+  font-variant-numeric: tabular-nums;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body hr {
+  margin: 2.5rem 0;
+  border: 0;
+  border-top: 1px solid var(--plain-line);
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__callout {
+  border-radius: 0 0.375rem 0.375rem 0;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__callout[data-tone="limit"] {
+  border-left-color: var(--plain-muted);
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__callout[data-tone="warning"] {
+  border-left-color: var(--warning, CanvasText);
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__callout > p + p {
+  margin-top: 0.6rem;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-footer {
+  padding-bottom: 3.5rem;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-layout {
+  padding-bottom: 2rem;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure > table {
+  margin: 0;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__sources span span {
+  display: inline;
+  margin: 0;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__related-products {
+  margin-top: 2.5rem;
+}
+
+.plain-site.plain-publication.plain-publication--embedded.plain-publication__list {
+  padding-block: 2rem;
+  border-top: 0;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__entry-title {
+  max-width: none;
+  margin: 0.15rem 0 0;
+  color: var(--plain-foreground);
+  font-family: var(--font-heading, inherit);
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.35;
+  text-wrap: pretty;
+}
+
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__entry-dek {
+  max-width: none;
+  margin: 0.45rem 0 0;
+  color: var(--plain-muted);
+  font-size: 0.95rem;
+  line-height: 1.55;
+}
+
+@media (pointer: coarse) {
+  .plain-site.plain-publication.plain-publication--embedded .plain-publication__entry-title a {
+    align-items: center;
+    display: flex;
+    min-block-size: var(--interactive-target-min, 48px);
+  }
+}
+
+:root[data-verification-pointer="coarse"]
+  .plain-site.plain-publication.plain-publication--embedded
+  .plain-publication__entry-title a {
+  align-items: center;
+  display: flex;
+  min-block-size: var(--interactive-target-min, 48px);
+}
+
+@media (min-width: 64rem) {
+  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] {
+    max-inline-size: calc(
+      var(--plain-article-measure) + var(--plain-article-aside) + var(--plain-article-column-gap) + 2 * var(--plain-shell-gutter)
+    );
+  }
+
+  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] .plain-publication__article-layout {
+    display: grid;
+    grid-template-columns: minmax(0, var(--plain-article-measure)) var(--plain-article-aside);
+    align-items: start;
+    column-gap: var(--plain-article-column-gap);
+  }
+
+  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] .plain-publication__toc {
+    position: sticky;
+    top: calc(var(--hraness-sticky-offset, 0px) + 1.5rem);
+    grid-column: 2;
+    grid-row: 1;
+    max-block-size: calc(100vh - var(--hraness-sticky-offset, 0px) - 3rem);
+    margin-bottom: 0;
+    padding: 0 0 0 1rem;
+    overflow-y: auto;
+    border-bottom: 0;
+    border-left: 1px solid var(--plain-line);
+  }
+
+  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] .plain-publication__toc ol {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] .plain-publication__article-body {
+    grid-column: 1;
+    grid-row: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .plain-site.plain-publication.plain-publication--embedded :where(
+    .plain-publication__toc,
+    .plain-publication__callout,
+    .plain-publication__article-body pre,
+    .plain-publication__article-body blockquote,
+    .plain-publication__article-body hr,
+    .plain-publication__article-body th,
+    .plain-publication__article-body td
+  ) {
+    border-color: CanvasText;
+  }
+
+  .plain-site.plain-publication.plain-publication--embedded .plain-publication__callout[data-tone] {
+    border-left-color: CanvasText;
+    background: Canvas;
+  }
+
+  .plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a {
+    text-decoration-color: LinkText;
+  }
+}
+
+/* Figures, recordings, charts, comparisons, launch beats, and the social kit */
+
+.plain-site.plain-publication .plain-publication__figure {
+  margin: 2rem 0;
+}
+
+.plain-site.plain-publication .plain-publication__figure-body > :is(img, video, svg) {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  border-radius: 0.5rem;
+}
+
+.plain-site.plain-publication .plain-publication__figure-caption,
+.plain-site.plain-publication .plain-publication__figure-note {
+  margin-top: 0.6rem;
+  color: var(--plain-muted);
+  font-size: var(--hraness-type-caption-size, .9375rem);
+  line-height: 1.5;
+}
+
+.plain-site.plain-publication .plain-publication__figure-label {
+  color: var(--plain-foreground);
+  font-weight: 700;
+}
+
+.plain-site.plain-publication .plain-publication__figure-credit {
+  display: block;
+  margin-top: 0.2rem;
+  font-size: 0.85em;
+}
+
+@media (min-width: 64rem) {
+  .plain-site.plain-publication .plain-publication__figure[data-width="wide"] {
+    margin-inline: min(-4rem, calc((var(--plain-article-measure, 43rem) - 100cqi) / 2));
+  }
+}
+
+.plain-site.plain-publication .plain-publication__video video {
+  aspect-ratio: auto;
+  background: var(--plain-surface, transparent);
+}
+
+.plain-site.plain-publication .plain-publication__data-table .plain-publication__table,
+.plain-site.plain-publication .plain-publication__bar-chart .plain-publication__bars {
+  margin-block: 0;
+}
+
+.plain-site.plain-publication .plain-publication__table-scroll:focus-visible {
+  outline: 1px dotted currentColor;
+  outline-offset: 3px;
+}
+
+.plain-site.plain-publication .plain-publication__table :is(th, td)[data-numeric] {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.plain-site.plain-publication .plain-publication__bars {
+  display: grid;
+  gap: 0.65rem;
+  margin: 0;
+  padding: 0.25rem 0;
+}
+
+.plain-site.plain-publication .plain-publication__bar {
+  display: grid;
+  grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr);
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.plain-site.plain-publication .plain-publication__bar dt {
+  overflow-wrap: anywhere;
+  font-size: .9375rem;
+  line-height: 1.35;
+}
+
+.plain-site.plain-publication .plain-publication__bar dd {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.plain-site.plain-publication .plain-publication__bar-track {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  block-size: 0.7rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--plain-surface);
+}
+
+.plain-site.plain-publication .plain-publication__bar-fill {
+  display: block;
+  inline-size: var(--plain-bar, 0%);
+  block-size: 100%;
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--plain-foreground) 38%, transparent);
+}
+
+.plain-site.plain-publication .plain-publication__bar[data-highlight] .plain-publication__bar-fill {
+  background: var(--plain-link);
+}
+
+.plain-site.plain-publication .plain-publication__bar-value {
+  flex: none;
+  min-inline-size: 3.5rem;
+  font-size: .9375rem;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+@media (max-width: 30rem) {
+  .plain-site.plain-publication .plain-publication__bar {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.25rem;
+  }
+}
+
+.plain-site.plain-publication .plain-publication__comparison :is(th, td)[data-highlight] {
+  background: color-mix(in srgb, var(--plain-link) 7%, transparent);
+}
+
+.plain-site.plain-publication .plain-publication__comparison thead th[data-highlight] {
+  color: var(--plain-foreground);
+}
+
+.plain-site.plain-publication .plain-publication__comparison-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  white-space: nowrap;
+}
+
+.plain-site.plain-publication .plain-publication__comparison-value[data-value="yes"] .plain-publication__comparison-glyph {
+  color: var(--plain-link);
+}
+
+.plain-site.plain-publication .plain-publication__comparison-value[data-value="no"] {
+  color: var(--plain-muted);
+}
+
+.plain-site.plain-publication .plain-publication__comparison-glyph {
+  flex: none;
+}
+
+.plain-site.plain-publication .plain-publication__comparison-note {
+  display: block;
+  margin-top: 0.15rem;
+  color: var(--plain-muted);
+  font-size: 0.85em;
+  font-weight: 400;
+}
+
+.plain-site.plain-publication .plain-publication__beats {
+  margin-block: 2rem;
+}
+
+.plain-site.plain-publication .plain-publication__beat {
+  scroll-margin-top: calc(var(--hraness-sticky-offset, 0px) + 1.5rem);
+}
+
+.plain-site.plain-publication .plain-publication__beat + .plain-publication__beat {
+  margin-top: 3rem;
+}
+
+.plain-site.plain-publication .plain-publication__beat-detail {
+  margin-top: -0.75rem;
+  font-size: .9375rem;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit {
+  margin: 2.5rem 0;
+  border-block: 1px solid var(--plain-line);
+}
+
+.plain-site.plain-publication .plain-publication__social-kit > summary {
+  padding: 0.9rem 0;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-list {
+  display: grid;
+  gap: 1rem;
+  margin: 0 0 1rem;
+  padding: 0;
+  list-style: none;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-item {
+  padding: 0.85rem 1rem;
+  border-radius: 0.5rem;
+  background: var(--plain-surface);
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-label {
+  flex: 1 1 auto;
+  font-weight: 700;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-count {
+  color: var(--plain-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-item[data-over] .plain-publication__social-kit-count {
+  color: var(--danger, CanvasText);
+  font-weight: 700;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-copy {
+  min-block-size: 2rem;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--plain-line);
+  border-radius: 999px;
+  background: var(--plain-background);
+  color: var(--plain-foreground);
+  cursor: pointer;
+  font: inherit;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-copy:focus-visible {
+  outline: 2px solid var(--plain-link);
+  outline-offset: 2px;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-text {
+  margin: 0.6rem 0 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.plain-site.plain-publication .plain-publication__social-kit-facts {
+  padding-bottom: 1rem;
+  font-size: .9375rem;
+}
+
+.plain-site.plain-publication .plain-publication__visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (pointer: coarse) {
+  .plain-site.plain-publication .plain-publication__social-kit-copy {
+    min-block-size: var(--interactive-target-min, 48px);
+  }
+}
+
+@media (forced-colors: active) {
+  .plain-site.plain-publication :where(.plain-publication__bar-track, .plain-publication__social-kit-item, .plain-publication__social-kit-copy) {
+    border: 1px solid CanvasText;
+  }
+
+  .plain-site.plain-publication .plain-publication__bar-fill {
+    background: CanvasText;
+  }
+
+  .plain-site.plain-publication .plain-publication__bar[data-highlight] .plain-publication__bar-fill {
+    background: Highlight;
+  }
+
+  .plain-site.plain-publication .plain-publication__comparison :is(th, td)[data-highlight] {
+    background: Canvas;
+  }
+}