/* ============================================================================
   page.css — the contributor page's one stylesheet (slice P25; design
   PROFILE-PAGE-2026-10-06 §4.1-§4.8). The edge serves it as
   /u/_a/page.{hash}.css (slice P26), the same bytes for every page.

   IT HOLDS NO COLOUR. Every colour is a custom property of the page's style
   block (./theme.mjs `styleBlock`, the names in `TOKENS`), built from the
   pinned theme table and the checked document. The preset, the accent, the
   visitor's dark mode (`purpose` only) and print are therefore the style
   block's business; this file only says where each token goes.

   IT LOADS NOTHING but the four faces in fonts/ beside it (§4.1). No script,
   no image, no @import. The faces' addresses are relative (slice L4, D140),
   so these bytes serve unchanged from the page host's /u/_a/ (the faces at
   /u/_a/fonts/) and from the site's /samples/assets/ (its faces at
   /samples/assets/fonts/). The class names are the contract the renderer
   emits: ./README.md, "Theme (P25)".
   ========================================================================== */

/* Latin subset, as src/styles/fonts.css: a glyph outside it falls back per glyph. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ base */

:root {
  /* The style block sets light or dark: `purpose` switches with the visitor,
     the other presets keep their own mode (§4.8). */
  color-scheme: var(--cp-scheme);
  --cp-font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --cp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --cp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  background: var(--cp-ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cp-ground);
  color: var(--cp-ink);
  font: 400 1rem/1.6 var(--cp-font-sans);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--cp-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* One ring for every focusable element, 2px clear of it, so it is drawn on the
   ground or the surface behind the element (focus 3:1 on both, theme table). */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--cp-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.cp-mono {
  font-family: var(--cp-font-mono);
  font-size: 0.8125em;
  font-variant-ligatures: none;
  overflow-wrap: anywhere;
}

.cp-fine {
  color: var(--cp-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.cp-print-only {
  display: none;
}

/* Links outside running text are targets at least 24px high (§4.5; WCAG 2.5.8). */
.cp-chrome a,
.cp-foot a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* ------------------------------------------------------------ the chrome */

/* A quiet line, no rule under it: the page begins below. */
.cp-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.cp-chrome .cp-fine {
  text-align: right;
}

/* The preview's top line ("Draft: only you can see this" or "Public: this is
   what visitors see", §3.3, D149) and a development page's test band (T5),
   above everything, in the fixed neutral status tone (held to 4.5:1 by the
   theme table). Both print. */
.cp-band {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--cp-neutral-border);
  background: var(--cp-neutral-bg);
  color: var(--cp-neutral);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* ------------------------------------------------------------- the cover */

/* No text ever sits on a cover (§4.4). An upload is the renderer's <img>. */
.cp-cover {
  position: relative;
  overflow: hidden;
  background: var(--cp-cover);
}

.cp-cover-none .cp-cover {
  display: none;
}

.cp-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------ the header */

.cp-head {
  position: relative;
}

.cp-ident {
  min-width: 0;
}

/* "Contributor page" stays in the page's words and is read out; the chrome
   above already says it, so the eye is spared a second label. Paper, the
   certificate look, and print show it as a quiet line. */
.cp-eyebrow {
  margin-bottom: 0.375rem;
  color: var(--cp-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media screen {
  .cp-layout-profile .cp-eyebrow,
  .cp-layout-minimal .cp-eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.cp-name {
  color: var(--cp-ink);
  font-family: var(--cp-font-serif);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.cp-login,
.cp-pronouns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  margin-top: 0.75rem;
  color: var(--cp-muted);
  font-size: 0.9375rem;
}

.cp-pronouns {
  margin-top: 0.375rem;
}

.cp-bio {
  max-width: 34rem;
  margin-top: 0.875rem;
  color: var(--cp-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.cp-picture {
  flex: none;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
}

.cp-picture > img,
.cp-picture > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The monogram: accent ground, button-ink letters (§6.3, at least 4.58:1). */
.cp-monogram-bg {
  fill: var(--cp-accent);
}

.cp-monogram-text {
  fill: var(--cp-on-accent);
  font-family: var(--cp-font-serif);
  font-weight: 600;
}

/* The rosette (picture, watermark) is drawn in currentColor whatever its
   own stroke says. */
.cp-rosette [stroke],
.cp-watermark [stroke] {
  stroke: currentColor;
}

.cp-rosette {
  color: var(--cp-accent-raw);
  background: var(--cp-surface);
}

/* The paper layout's watermark sits in its own column of the header grid, so
   no text is ever drawn over it; it is hidden wherever that column is not. */
.cp-watermark {
  display: none;
  color: var(--cp-rule);
  pointer-events: none;
}

.cp-watermark > svg {
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------- the divider */

/* Between the header and the content: a short centred hairline in the rule
   colour, 70 px, with a small accent dot in its middle, and space above and
   below it. The dot and the two strokes are
   borders, so it prints as drawn; the dot's width is even, so it is drawn
   solid. The renderer draws it when anything follows the header. */
.cp-divider {
  position: relative;
  width: 6px;
  height: 6px;
  margin: 2.75rem auto 0;
  border: 3px solid var(--cp-accent);
  border-radius: 50%;
}

.cp-divider::before,
.cp-divider::after {
  content: '';
  position: absolute;
  top: -0.5px;
  width: 26px;
  border-top: 1px solid var(--cp-rule);
}

.cp-divider::before {
  right: 9px;
}

.cp-divider::after {
  left: 9px;
}

.cp-divider + .cp-section {
  margin-top: 2.75rem;
}

/* ------------------------------------------------------------ the sections */

/* No boxes and no capitals: a section is its heading in the serif, its
   sentence, and space. The summary needs no heading to be seen: its sentence
   opens the page's facts (the h2 is still read out). */
.cp-section {
  margin-top: 3rem;
}

.cp-h2 {
  margin-bottom: 0.375rem;
  color: var(--cp-ink);
  font-family: var(--cp-font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 2rem;
}

.cp-section > p + p {
  margin-top: 0.375rem;
}

.cp-section-summary > .cp-h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cp-section-summary > p:first-of-type {
  color: var(--cp-ink);
  font-family: var(--cp-font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ----------------------------------------------------------- the about block */

/* D163: the first thing under the header, in the divider's place (the
   renderer draws one or the other), so the person's work below is read with
   its meaning. A soft panel one tone off what is behind it, with no border,
   soft corners and generous padding: the surface on the ground (profile,
   minimal), the ground on paper's sheet, which is itself the surface. The
   theme holds the ink, the muted text, the accent and the focus ring to their
   ratios on both. Its heading is a section's serif, a little smaller; our
   words are quiet; the person's own words keep their line breaks, in the ink,
   with our one line after them in fine print. */
.cp-section-about {
  padding: 1.375rem 1.625rem 1.5rem;
  border-radius: 14px;
  background: var(--cp-surface);
}

.cp-layout-paper .cp-section-about {
  background: var(--cp-ground);
}

.cp-section-about > .cp-h2 {
  margin-bottom: 0.5rem;
  font-size: 1.1875rem;
  line-height: 1.6rem;
  /* Even lines: "What Purpose Source means to me" leaves no word alone at 375 px. */
  text-wrap: balance;
}

.cp-section-about > p {
  color: var(--cp-muted);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.cp-section-about > p + p {
  margin-top: 0.75rem;
}

.cp-section-about > .cp-about-words {
  color: var(--cp-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.cp-section-about > .cp-about-line {
  font-size: 0.875rem;
  line-height: 1.6;
}

.cp-section-about + .cp-section {
  margin-top: 2.75rem;
}

/* ------------------- the collections: a matrix and a list (ops D165, D166) */

/* The certificates, the projects and the licence's repositories, each its own
   section, never folded: its heading with a quiet switch at the end of its
   line, then the collection. The switch needs no script: two visually hidden
   radio inputs before it, their labels two small icon buttons; `:checked ~
   .cp-grid` lays it out as a list. Nothing is stored. Print draws no switch
   and a plain list (below).

   D166 (the operator: "look at github: he has so nice way to group things
   together in a list ... it's still supposed to be on our end a social
   view"): both views are one family of hairlines in the rule colour, with no
   shadow. The matrix is light cards, each its small picture and its name on
   one line and its facts in a quiet row beneath; the list is ONE framed group
   per collection, its rows divided by hairlines: the small picture, the owner
   muted beside the bold name, the facts at the row's end (a muted line under
   the name on a phone), and GitHub's mark last. */
.cp-collection {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
}

.cp-collection > * {
  grid-column: 1 / -1;
}

.cp-collection > .cp-h2 {
  grid-column: 1;
  margin-bottom: 0;
}

.cp-collection > .cp-views {
  grid-row: 1;
  grid-column: 2;
}

.cp-collection > .cp-h2 + p,
.cp-collection > .cp-views + p {
  margin-top: 0.25rem;
}

.cp-collection > .cp-fine {
  margin-top: 0.875rem;
}

/* The inputs take the keyboard (Tab reaches the chosen one, the arrows move
   between the two); their labels draw what they say and ring for them. */
.cp-switch {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cp-views {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--cp-rule);
  border-radius: 8px;
}

/* Each button a 32 px target; the chosen one filled in the ink, its icon in
   the ground (both held to 4.5:1 by the theme), the other a muted icon. */
.cp-view {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  color: var(--cp-muted);
  cursor: pointer;
}

.cp-view:hover {
  color: var(--cp-ink);
}

.cp-view-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.cp-switch-cards:checked ~ .cp-views > .cp-view-cards,
.cp-switch-list:checked ~ .cp-views > .cp-view-list {
  background: var(--cp-ink);
  color: var(--cp-ground);
  cursor: default;
}

.cp-switch-cards:focus-visible ~ .cp-views > .cp-view-cards,
.cp-switch-list:focus-visible ~ .cp-views > .cp-view-list {
  outline: 3px solid var(--cp-focus);
  outline-offset: 2px;
}

/* THE MATRIX, the default: about 13rem a card (15rem a certificate), so three
   across the 42rem column, two certificates, one of each on a phone. */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.cp-section-certificates > .cp-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* A project's or an adopted repository's card: the picture, the name and,
   at the line's end, GitHub's mark; the facts in a quiet row beneath. The
   body is no box of its own: its name and facts take their places in the
   card's grid. A hairline in the rule colour round the surface on the
   ground; on paper the sheet itself shows through. Every part keeps to the
   top of its line, so a long name wraps under itself and the picture and the
   mark stay with its first line; a card taller than its content (a row of
   cards is as tall as its tallest) keeps the room at its foot. */
.cp-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'icon name end'
    'meta meta meta';
  align-content: start;
  align-items: start;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--cp-rule);
  border-radius: 8px;
  background: var(--cp-surface);
}

.cp-item-body {
  display: contents;
}

/* The small picture, 20 px, on the name's first line. */
.cp-item-icon {
  display: grid;
  grid-area: icon;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  user-select: none;
}

.cp-item-icon > .cp-item-own {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.cp-item-icon > .cp-owner-tile {
  width: 1.25rem;
  height: 1.25rem;
}

/* An owner's tile: its first letter on its hue (the style block's
   --cp-hue-{n}, from the theme table, held to 4.5:1 by theme.mjs). */
.cp-owner-tile-text {
  fill: var(--cp-on-hue);
  font-family: var(--cp-font-sans);
  font-weight: 600;
}

.cp-hue-0 {
  fill: var(--cp-hue-0);
}

.cp-hue-1 {
  fill: var(--cp-hue-1);
}

.cp-hue-2 {
  fill: var(--cp-hue-2);
}

.cp-hue-3 {
  fill: var(--cp-hue-3);
}

.cp-hue-4 {
  fill: var(--cp-hue-4);
}

.cp-hue-5 {
  fill: var(--cp-hue-5);
}

/* The name, the card's one link to its record: bold in the ink, as a title
   in GitHub's lists, the link colour and its underline when hovered. The
   link is as wide as its words (at most its column), so its focus ring and
   its hover hold the name, not the empty room up to the facts or the mark. */
.cp-item-name {
  grid-area: name;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  color: var(--cp-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.cp-item-name:hover {
  color: var(--cp-accent);
}

/* The owner, where shown, muted at the normal weight, before the name. Each
   half is one box on the line, so a card too narrow for `owner/name` breaks
   it after the slash, never at a hyphen inside either half (a half wider
   than the whole line still wraps inside itself). An underline does not
   reach into such a box, so the hover draws each half's own. */
.cp-item-owner {
  color: var(--cp-muted);
  font-weight: 400;
}

.cp-item-owner,
.cp-item-repo {
  display: inline-block;
  max-width: 100%;
}

.cp-item-name:hover > .cp-item-owner,
.cp-item-name:hover > .cp-item-repo {
  text-decoration: underline;
}

.cp-item-meta {
  display: flex;
  flex-wrap: wrap;
  grid-area: meta;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
  margin-top: 0.5rem;
}

/* A chip in a narrow card may take two lines: its corners stay soft. */
.cp-item-meta > .cp-chip {
  border-radius: 6px;
}

.cp-row-meta {
  color: var(--cp-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.cp-row-projects {
  color: var(--cp-muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* A certificate's projects break between their names, never at a hyphen
   inside one (a name wider than the line still wraps inside itself). */
.cp-row-projects > span {
  display: inline-block;
  max-width: 100%;
}

/* GitHub's mark at the end of the name's line: a licence repository's
   evidence, a project's repository on GitHub (screen only). Its words are the
   link's hidden text (print writes the evidence's out); the mark's own padded
   box is its 24 px target, centred on the 20 px line. */
.cp-evidence,
.cp-item-gh {
  display: flex;
  grid-area: end;
  flex: none;
  margin: -0.125rem -0.25rem -0.125rem 0.375rem;
  border-radius: 4px;
  text-decoration: none;
}

.cp-evidence .cp-plat-mark,
.cp-item-gh .cp-plat-mark {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.28125rem;
}

.cp-evidence:hover .cp-plat-mark,
.cp-item-gh:hover .cp-plat-mark {
  opacity: 0.72;
}

.cp-evidence:focus-visible,
.cp-item-gh:focus-visible {
  outline-offset: 0;
}

/* A certificate's card, a small sheet in the same hairlines: a second thin
   rule 3 px inside its edge, the seal, the kind over the period in the serif
   and the accent, the live status as one band, its projects, and a foot with
   the check and the whole id, at the sheet's bottom so two sheets side by
   side line their feet up. */
.cp-cert {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  padding: 1rem 1.125rem 0.875rem;
  border: 1px solid var(--cp-rule);
  border-radius: 8px;
  background: var(--cp-surface);
  box-shadow:
    inset 0 0 0 3px var(--cp-surface),
    inset 0 0 0 4px var(--cp-rule);
}

.cp-layout-paper .cp-item,
.cp-layout-paper .cp-cert {
  background: none;
}

.cp-cert-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
}

.cp-seal {
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
}

.cp-seal-edge {
  fill: var(--cp-accent);
}

.cp-seal-ok .cp-seal-disc {
  fill: var(--cp-ok-bg);
}

.cp-seal-ok .cp-seal-mark {
  fill: var(--cp-ok);
}

.cp-seal-bad .cp-seal-disc {
  fill: var(--cp-bad-bg);
}

.cp-seal-bad .cp-seal-mark {
  fill: var(--cp-bad);
}

.cp-seal-neutral .cp-seal-disc {
  fill: var(--cp-neutral-bg);
}

.cp-seal-neutral .cp-seal-mark {
  fill: var(--cp-neutral);
}

.cp-cert-kind {
  align-self: end;
  color: var(--cp-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.cp-cert-period {
  align-self: start;
  color: var(--cp-accent);
  font-family: var(--cp-font-serif);
  font-size: 1.5rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
  line-height: 1.2;
}

/* The status as one band across the sheet: its words may take two lines. */
.cp-cert > .cp-chip {
  display: flex;
  align-items: flex-start;
  border-radius: 6px;
  padding: 0.3125rem 0.5rem;
}

.cp-cert > .cp-chip > .cp-chip-icon {
  margin-top: 0.125rem;
}

/* The foot's check link is as wide as its words, so its ring holds them. */
.cp-cert-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid var(--cp-rule);
}

.cp-cert-foot > a {
  font-size: 0.875rem;
}

.cp-cert-foot > .cp-mono {
  color: var(--cp-muted);
  font-size: 0.75rem;
}

/* THE LIST the viewer may switch to (a screen of 720 px and wider; a phone's
   is below): the collection becomes one group in one frame, the surface on
   the ground (on paper the sheet), its rows divided by hairlines and framed
   no more on their own. */
@media screen and (min-width: 720px) {
  .cp-switch-list:checked ~ .cp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0.75rem;
    border: 1px solid var(--cp-rule);
    border-radius: 8px;
    background: var(--cp-surface);
  }

  .cp-layout-paper .cp-switch-list:checked ~ .cp-grid {
    background: none;
  }

  .cp-switch-list:checked ~ .cp-grid > li {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .cp-switch-list:checked ~ .cp-grid > li + li {
    border-top: 1px solid var(--cp-rule);
  }

  /* A project's or a licence repository's row: the picture, the owner and the
     name, the facts at the end of the line, then GitHub's mark. */
  .cp-switch-list:checked ~ .cp-grid > .cp-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: 'icon name meta end';
    padding: 0.625rem 0.875rem 0.625rem 1rem;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-item-meta {
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin: -0.0625rem 0 0 1rem;
    white-space: nowrap;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-item-meta > .cp-chip {
    border-radius: 999px;
  }

  /* A certificate's row: the seal, "Contributor certificate" and its period
     as the row's title, the live status at its end; its projects, then the
     check and the whole id, as muted lines under the title. */
  .cp-switch-list:checked ~ .cp-grid > .cp-cert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'head chip'
      'projects projects'
      'foot foot';
    align-items: start;
    gap: 0.125rem 1rem;
    padding: 0.625rem 0.875rem 0.625rem 1rem;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-cert-head {
    display: flex;
    grid-area: head;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    min-width: 0;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-seal {
    width: 1.25rem;
    height: 1.25rem;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-cert-kind {
    align-self: auto;
    color: var(--cp-ink);
    font-size: 0.9375rem;
    line-height: 1.25rem;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-cert-period {
    align-self: auto;
    font-family: var(--cp-font-sans);
    font-size: 0.9375rem;
    line-height: 1.25rem;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-cert > .cp-chip {
    display: inline-flex;
    grid-area: chip;
    align-items: center;
    justify-self: end;
    margin-top: -0.0625rem;
    border-radius: 999px;
    padding: 0.0625rem 0.5rem 0.0625rem 0.4375rem;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-cert > .cp-chip > .cp-chip-icon {
    margin-top: 0;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-cert > .cp-row-projects {
    grid-area: projects;
    padding-left: 1.75rem;
  }

  .cp-switch-list:checked ~ .cp-grid .cp-cert-foot {
    flex-direction: row;
    flex-wrap: wrap;
    grid-area: foot;
    align-items: baseline;
    gap: 0 0.75rem;
    margin-top: 0;
    padding-top: 0;
    padding-left: 1.75rem;
    border-top: 0;
  }
}

/* A PHONE, below 720 px, the page's phone width (ops D168: there the matrix
   adds nothing): every collection is the list, whichever input is checked,
   and the switch is not drawn. Its inputs leave the keyboard's order and the reading, so no
   stop says "Show as cards" where nothing would change, and the heading
   takes the whole line. The markup is the desktop's: a wider screen (a phone
   turned, a window widened) brings the switch back with its choice. The
   list is the one above, but the facts and a certificate's status take a
   muted line under the title, where the row has the room. */
@media screen and (max-width: 719.98px) {
  .cp-collection > .cp-switch,
  .cp-collection > .cp-views {
    display: none;
  }

  .cp-collection > .cp-h2 {
    grid-column: 1 / -1;
  }

  .cp-switch ~ .cp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0.75rem;
    border: 1px solid var(--cp-rule);
    border-radius: 8px;
    background: var(--cp-surface);
  }

  .cp-layout-paper .cp-switch ~ .cp-grid {
    background: none;
  }

  .cp-switch ~ .cp-grid > li {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .cp-switch ~ .cp-grid > li + li {
    border-top: 1px solid var(--cp-rule);
  }

  .cp-switch ~ .cp-grid > .cp-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'icon name end'
      '. meta meta';
    padding: 0.625rem 0.875rem 0.625rem 1rem;
  }

  .cp-switch ~ .cp-grid .cp-item-meta {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0.25rem 0 0;
  }

  .cp-switch ~ .cp-grid .cp-item-meta > .cp-chip {
    border-radius: 999px;
  }

  .cp-switch ~ .cp-grid > .cp-cert {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'chip'
      'projects'
      'foot';
    align-items: start;
    gap: 0.125rem 1rem;
    padding: 0.625rem 0.875rem 0.625rem 1rem;
  }

  .cp-switch ~ .cp-grid .cp-cert-head {
    display: flex;
    grid-area: head;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    min-width: 0;
  }

  .cp-switch ~ .cp-grid .cp-seal {
    width: 1.25rem;
    height: 1.25rem;
  }

  .cp-switch ~ .cp-grid .cp-cert-kind {
    align-self: auto;
    color: var(--cp-ink);
    font-size: 0.9375rem;
    line-height: 1.25rem;
  }

  .cp-switch ~ .cp-grid .cp-cert-period {
    align-self: auto;
    font-family: var(--cp-font-sans);
    font-size: 0.9375rem;
    line-height: 1.25rem;
  }

  .cp-switch ~ .cp-grid .cp-cert > .cp-chip {
    display: inline-flex;
    grid-area: chip;
    align-items: center;
    justify-self: start;
    margin: 0.25rem 0 0.125rem 1.75rem;
    border-radius: 999px;
    padding: 0.0625rem 0.5rem 0.0625rem 0.4375rem;
  }

  .cp-switch ~ .cp-grid .cp-cert > .cp-chip > .cp-chip-icon {
    margin-top: 0;
  }

  .cp-switch ~ .cp-grid .cp-cert > .cp-row-projects {
    grid-area: projects;
    padding-left: 1.75rem;
  }

  .cp-switch ~ .cp-grid .cp-cert-foot {
    flex-direction: row;
    flex-wrap: wrap;
    grid-area: foot;
    align-items: baseline;
    gap: 0 0.75rem;
    margin-top: 0;
    padding-top: 0;
    padding-left: 1.75rem;
    border-top: 0;
  }
}

/* Status: the fixed tokens, an icon and words, never the accent (§4.3). On
   screen a chip is its tone's quiet tint alone, the small tick or mark and the
   words; print draws its border. */
.cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 1.375rem;
  padding: 0.0625rem 0.5rem 0.0625rem 0.4375rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.cp-chip-icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* A link inside a chip ("Updated, see new") takes the chip's own tone, which the
   theme table holds to 4.5:1 on the chip; its underline still marks it. */
.cp-chip a {
  color: inherit;
}

.cp-tone-ok {
  color: var(--cp-ok);
  background: var(--cp-ok-bg);
  border-color: var(--cp-ok-bg);
}

.cp-tone-bad {
  color: var(--cp-bad);
  background: var(--cp-bad-bg);
  border-color: var(--cp-bad-bg);
}

.cp-tone-neutral {
  color: var(--cp-neutral);
  background: var(--cp-neutral-bg);
  border-color: var(--cp-neutral-bg);
}

/* Words a screen reader says and the eye does not see: a part of a link its
   owner did not tick, the name of an icon-only link, the rest of the
   "Verified" chip's name. Text, not aria-label, so it survives a copy. */
.cp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Links and buttons: targets at least 24 px (§4.5). */
.cp-linklist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* A long handle or host breaks anywhere rather than widening the page (P26).
   The row is one link: the logo, the platform's name in the ink, and the last
   words shown in the link colour with the one underline (D149, design
   page-refinements §1.3). The GitHub line reads the same way. */
.cp-linklist a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 1.5rem;
  overflow-wrap: anywhere;
}

.cp-linklist a,
.cp-gh {
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-gh {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 1.5rem;
  overflow-wrap: anywhere;
}

.cp-linklist bdi,
.cp-gh bdi {
  min-width: 0;
}

.cp-plat-name {
  font-weight: 600;
}

.cp-lw {
  color: var(--cp-accent);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.cp-linklist a:hover .cp-lw,
.cp-gh:hover .cp-lw {
  text-decoration-thickness: 2px;
}

/* A platform's own logo, plain: one colour, black on a light row and white on
   a dark one (--cp-mark), never the accent, and never in a box, tile, border
   or shadow (D149 items 6 and 7). */
.cp-plat-mark {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--cp-mark);
}

/* Icon-only links stand side by side as plain logos: a 44 px target with the
   24 px logo in its middle, 4 px apart, pulled 10 px left so the first logo
   lines up with the text above. The target is invisible; keyboard focus draws
   the page's one ring round it, the only shape that ever appears there. */
.cp-plat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.25rem -10px;
}

.cp-plat-tile {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  text-decoration: none;
}

.cp-plat-tile .cp-plat-mark {
  width: 1.5rem;
  height: 1.5rem;
}

.cp-plat-tile:hover .cp-plat-mark {
  opacity: 0.72;
}

.cp-plat-tile:focus-visible {
  outline-offset: 0;
  border-radius: 8px;
}

/* The outbound arrow after the website, in the link colour. */
.cp-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.cp-linklist .cp-icon {
  fill: var(--cp-accent);
}

/* Placed "together with my name" (design page-refinements §2.3): after the bio,
   the GitHub line on its own line, then the logos and the listed links
   flowing on one line together, with no heading. */
.cp-headlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  margin-top: 1rem;
}

.cp-headlinks > .cp-login {
  flex-basis: 100%;
  margin-top: 0;
}

.cp-headlinks .cp-plat-row {
  margin-bottom: 0;
}

.cp-headlinks .cp-linklist {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.cp-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cp-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  background: var(--cp-accent);
  color: var(--cp-on-accent);
  font-weight: 600;
  text-decoration: none;
}

.cp-button .cp-plat-mark {
  fill: var(--cp-on-accent);
}

.cp-section-links .cp-linklist,
.cp-section-sponsors .cp-buttons {
  margin-top: 0.5rem;
}

.cp-section-sponsors .cp-fine {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------ the footer */

.cp-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'text qr';
  gap: 1rem 2rem;
  align-items: end;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cp-rule);
}

.cp-foot-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cp-foot-text > .cp-mono {
  color: var(--cp-ink);
  font-size: 0.8125rem;
}

/* The QR is our own SVG, dark on white, never inverted (§4.8). */
.cp-qr {
  grid-area: qr;
  width: 6rem;
  height: 6rem;
}

.cp-qr > svg {
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------- layout: paper (default) */

/* The certificate look (§4.2): a sheet with one hairline, the serif name, the
   quiet eyebrow, the sections, the watermark, the QR bottom right. No cover: the
   renderer draws none in paper, and this rule is the belt (D149 item 6). */
.cp-layout-paper .cp-page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.cp-layout-paper .cp-cover {
  display: none;
}

.cp-layout-paper .cp-sheet {
  position: relative;
  padding: 3rem 3.5rem 2.25rem;
  border: 1px solid var(--cp-rule);
  background: var(--cp-surface);
}

.cp-layout-paper .cp-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 10rem;
  gap: 1.75rem;
  align-items: start;
}

.cp-layout-paper .cp-name {
  color: var(--cp-accent);
}

.cp-layout-paper .cp-watermark {
  display: block;
  width: 10rem;
}

.cp-layout-paper .cp-sheet > .cp-section,
.cp-layout-paper .cp-foot {
  max-width: 44rem;
}

/* The header's columns are placed, not taken in order, so a page with no picture
   (§6.3, "None") keeps the name beside the watermark. Phones stack the header and
   print draws it as a block, so this holds on wide screens only. */
@media screen and (min-width: 720px) {
  .cp-layout-paper .cp-picture {
    grid-column: 1;
  }

  .cp-layout-paper .cp-ident {
    grid-column: 2;
  }

  .cp-layout-paper .cp-watermark {
    grid-column: 3;
  }

  .cp-picture-none.cp-layout-paper .cp-head {
    grid-template-columns: minmax(0, 1fr) 10rem;
  }

  .cp-picture-none.cp-layout-paper .cp-ident {
    grid-column: 1;
  }

  .cp-picture-none.cp-layout-paper .cp-watermark {
    grid-column: 2;
  }
}

/* ---------------------------------------------------------- layout: profile */

/* Cover band, the picture overlapping it, the header centred; below it one
   reading column of 42rem, three cards wide (§4.2, D162, D165). */
.cp-layout-profile .cp-cover {
  height: clamp(120px, 19.6vw, 176px);
}

.cp-layout-profile .cp-sheet {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.cp-layout-profile .cp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cp-layout-profile .cp-picture {
  width: 128px;
  height: 128px;
  margin-top: -64px;
  margin-bottom: 1.25rem;
  /* The cut-out where the picture overlaps the cover: the ground, no ring. */
  box-shadow: 0 0 0 4px var(--cp-ground);
}

.cp-cover-none.cp-layout-profile .cp-picture {
  margin-top: 3rem;
  box-shadow: none;
}

/* With no picture to overlap the cover, the header keeps its own space. */
.cp-picture-none.cp-layout-profile .cp-head {
  padding-top: 2rem;
}

.cp-cover-none.cp-picture-none.cp-layout-profile .cp-head {
  padding-top: 3rem;
}

.cp-layout-profile .cp-login,
.cp-layout-profile .cp-pronouns,
.cp-layout-profile .cp-headlinks {
  justify-content: center;
}

.cp-layout-profile .cp-bio {
  margin-right: auto;
  margin-left: auto;
}

.cp-layout-profile .cp-headlinks .cp-plat-row {
  justify-content: center;
  margin-inline: 0;
}

.cp-layout-profile .cp-sheet > .cp-section,
.cp-layout-profile .cp-foot {
  max-width: 42rem;
  margin-right: auto;
  margin-left: auto;
}

/* ---------------------------------------------------------- layout: minimal */

/* One typographic column: no cover, no frame, no watermark (§4.2). */
.cp-layout-minimal .cp-cover {
  display: none;
}

.cp-layout-minimal .cp-sheet {
  max-width: 44rem;
  margin: 0 auto;
  padding: 4rem 1rem 3rem;
}

.cp-layout-minimal .cp-picture {
  width: 72px;
  height: 72px;
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------- phone, below 720px */

@media (max-width: 719.98px) {
  .cp-layout-paper .cp-page {
    padding: 1rem 1rem 2rem;
  }

  .cp-layout-paper .cp-sheet {
    padding: 2rem 1.25rem 1.5rem;
  }

  .cp-layout-paper .cp-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .cp-layout-paper .cp-watermark {
    display: none;
  }

  .cp-layout-minimal .cp-sheet {
    padding-top: 2.5rem;
  }

  .cp-name {
    font-size: 2rem;
  }

  .cp-bio {
    font-size: 1rem;
  }

  .cp-section {
    margin-top: 2.5rem;
  }

  .cp-section-about {
    padding: 1.125rem 1.25rem 1.25rem;
    border-radius: 12px;
  }

  .cp-section-summary > p:first-of-type {
    font-size: 1.1875rem;
  }

  .cp-foot {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'text' 'qr';
  }
}

/* --------------------------------------------------------- the card, §4.9 */

/* ?view=card: the markup the render job screenshots. 480 x 160 CSS px (960 x
   320 at a device scale of 2), and 1200 x 630 for the link preview
   (cp-card-og). Every length below is in em of the card's own size, so the two
   sizes are one drawing. The picture, the name, the login, one summary line,
   one adopter line, up to five platforms with their logos, and the mark with
   the permanent address; never a figure, a status or a QR, and no cover strip
   or picture ring (D149 item 6). */
.cp-view-card body {
  background: var(--cp-ground);
}

.cp-card {
  display: flex;
  flex-direction: column;
  width: 480px;
  height: 160px;
  overflow: hidden;
  background: var(--cp-surface);
  font-size: 13px;
  line-height: 1.35;
}

.cp-card-og .cp-card {
  width: 1200px;
  height: 630px;
  font-size: 30px;
}

.cp-card-body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1.25em;
  min-height: 0;
  padding: 0 1.5em;
}

.cp-card .cp-picture {
  width: 7.385em;
  height: 7.385em;
}

.cp-card-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
}

.cp-card-name {
  overflow: hidden;
  color: var(--cp-ink);
  font-family: var(--cp-font-serif);
  font-size: 1.5385em;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-card-login,
.cp-card-line {
  overflow: hidden;
  color: var(--cp-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-card-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.75em;
  color: var(--cp-ink);
  font-size: 0.9231em;
}

.cp-card-marks > li {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.cp-card .cp-plat-mark {
  width: 1em;
  height: 1em;
}

.cp-card-foot {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.25em;
  color: var(--cp-muted);
  font-size: 0.8462em;
}

.cp-mark {
  display: inline-block;
  flex: none;
  width: 1.6em;
}

.cp-mark > svg {
  width: 100%;
  height: auto;
}

/* ------------------------------------------- the marks (D140, slice L4) */

/* A public sample, or the preview of the card (.cp-tiled on <html>), carries
   the tiled watermark (./mark.mjs): one aria-hidden SVG over the whole body of a
   page, and inside .cp-card on a card. It lies over everything, so no
   surface, cover or band can hide it from a crop, at 8% of the ink colour, so
   it tints a text and the ground behind it alike by no more than that; it
   takes no pointer. The QR is raised above it, so a phone reads the code as
   on a real page. The body is at least a viewport tall, so a short page is
   covered to the bottom of the screen. Nothing here applies to a real page. */
.cp-tiled body {
  position: relative;
  min-height: 100vh;
}

.cp-tiled.cp-view-card body {
  min-height: 0;
}

.cp-tiled .cp-card {
  position: relative;
}

.cp-tile {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: 100%;
  overflow: hidden;
  opacity: 0.08;
  pointer-events: none;
}

.cp-tile text {
  fill: var(--cp-ink);
  font-family: var(--cp-font-sans);
  font-weight: 600;
}

.cp-tiled .cp-qr {
  position: relative;
  z-index: 2;
}

/* A preview's card foot prints "After you publish: {address}", longer than
   the address alone: it stays on its one line and is cut with an ellipsis. */
.cp-tiled .cp-card-foot .cp-mono {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------- print, §4.8 */

/* One column on white with the print row's tokens (the style block's @media
   print). No chrome, no cover, no sponsorship, no report link; every link
   prints its address; the QR at least 20 mm; no status chip on a certificate
   row, which prints "Check the live status at …" instead; the footer line.
   Paper never folds (D165: nothing is folded): no switch, and every collection
   prints as a list, a certificate in its frame with no seal glyph. */
@media print {
  @page {
    margin: 15mm;
  }

  :root,
  body {
    background: var(--cp-ground);
  }

  .cp-chrome,
  .cp-cover,
  .cp-watermark,
  .cp-section-sponsors,
  .cp-report,
  .cp-screen-only,
  .cp-cert .cp-chip,
  .cp-views,
  .cp-seal-mark {
    display: none !important;
  }

  .cp-print-only {
    display: block;
  }

  /* On white, a chip keeps its border. */
  .cp-tone-ok {
    border-color: var(--cp-ok-border);
  }

  .cp-tone-bad {
    border-color: var(--cp-bad-border);
  }

  .cp-tone-neutral {
    border-color: var(--cp-neutral-border);
  }

  /* A printed preview or test page keeps its band, clear of the picture. */
  .cp-band {
    margin-bottom: 5mm;
  }

  .cp-layout-profile .cp-eyebrow,
  .cp-layout-minimal .cp-eyebrow {
    position: static;
  }

  /* Icon-only links print as a list: the logo, the platform's name and, after
     it, the address (the rule below). Logos print black (the print row). */
  .cp-plat-row {
    flex-direction: column;
    margin: 0 0 1mm;
  }

  .cp-plat-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    height: auto;
  }

  .cp-plat-tile .cp-plat-mark {
    width: 1.25rem;
    height: 1.25rem;
  }

  .cp-plat-tile .cp-vh,
  .cp-evidence .cp-vh {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  /* Every collection prints as a list: one column; a project or an adopted
     repository a plain row, its icon small; a certificate keeps its frame on
     white. The adopter's evidence prints its words and its address, not its
     mark, running on after the name's own address; a project's GitHub mark is
     screen only (D166). The list's one frame (D166) is screen only too. */
  .cp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2mm;
    margin-top: 3mm;
  }

  .cp-section-certificates > .cp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-item,
  .cp-layout-paper .cp-item {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .cp-item-icon {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    vertical-align: middle;
  }

  .cp-item-icon > .cp-item-own,
  .cp-item-icon > .cp-owner-tile {
    width: 1.25rem;
    height: 1.25rem;
  }

  .cp-item-body,
  .cp-item-owner,
  .cp-item-repo {
    display: inline;
  }

  .cp-item-meta {
    display: inline-flex;
    margin: 0 0 0 0.5rem;
  }

  .cp-evidence {
    display: inline;
    margin: 0 0 0 0.5rem;
  }

  .cp-evidence .cp-plat-mark {
    display: none;
  }

  .cp-cert,
  .cp-layout-paper .cp-cert {
    padding: 4mm 5mm;
    background: none;
    box-shadow: none;
  }

  .cp-headlinks {
    display: block;
  }

  .cp-headlinks .cp-linklist {
    flex-direction: column;
  }

  .cp-page,
  .cp-layout-paper .cp-page,
  .cp-layout-profile .cp-sheet,
  .cp-layout-minimal .cp-sheet {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .cp-layout-profile .cp-sheet > .cp-section,
  .cp-layout-profile .cp-foot,
  .cp-layout-paper .cp-sheet > .cp-section,
  .cp-layout-paper .cp-foot {
    max-width: none;
  }

  .cp-layout-paper .cp-sheet {
    padding: 8mm 10mm;
  }

  .cp-layout-paper .cp-head,
  .cp-layout-profile .cp-head {
    display: block;
    text-align: left;
  }

  .cp-layout-paper .cp-picture,
  .cp-layout-profile .cp-picture {
    margin: 0 0 5mm;
    box-shadow: none;
  }

  .cp-layout-profile .cp-login,
  .cp-layout-profile .cp-pronouns {
    justify-content: flex-start;
  }

  .cp-layout-profile .cp-bio {
    margin-left: 0;
  }

  .cp-section {
    margin-top: 8mm;
  }

  /* The divider keeps to what follows it, never ending a page alone. */
  .cp-divider {
    margin-top: 7mm;
    break-after: avoid;
  }

  .cp-divider + .cp-section {
    margin-top: 7mm;
  }

  /* The about block on paper: its border, no fill. */
  .cp-section-about,
  .cp-layout-paper .cp-section-about {
    padding: 4mm 5mm;
    border: 1px solid var(--cp-rule);
    background: none;
  }

  .cp-section-about + .cp-section {
    margin-top: 7mm;
  }

  .cp-section,
  .cp-grid > li,
  .cp-foot {
    break-inside: avoid;
  }

  .cp-h2 {
    break-after: avoid;
  }

  a[href^='https://']::after {
    content: ' (' attr(href) ')';
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: 0.8em;
    overflow-wrap: anywhere;
  }

  .cp-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'text qr';
  }

  .cp-qr {
    width: 25mm;
    height: 25mm;
  }
}