/* Pigeon site tokens. The real brand (docs/brand/BRAND.md, 2026-10-24):
   Pigeon Purple, Black, Sky Blue, Pink, Mist, Orange. Black is the website's
   ground, Mist its text, Purple the call-to-action fill, Sky Blue links and
   focus; Pink and Orange mark state and the odd highlight, nothing else.
   The neutrals lean cool, Mist's way (red <= green <= blue; black is the
   limit case). The light theme is the same palette on white.
   This is the only site file allowed a colour, a length or a font name
   (scripts/site/check.py holds the rest to that).
   Black is the default: it is :root. Light applies only when the visitor
   ticks the theme switch, which needs no script and stores nothing. */

:root {
  color-scheme: dark;
  --pg-bg: #000000;
  --pg-surface: #0B0C0E;
  --pg-surface-2: #15171A;
  /* The fine lines of the grid: decoration, never the only edge of a control. */
  --pg-grid: #1B1D21;
  --pg-border: #2B2E34;
  --pg-border-strong: #7C838D;
  --pg-text: #F0F2F4;
  --pg-text-muted: #A5ABB4;
  --pg-accent: #5432CD;
  --pg-on-accent: #FFFFFF;
  /* Purple is 2.71:1 on black, under the 3:1 a control's edge needs, so a
     filled button carries a 1 px edge of a lighter purple. A UI tint, not a
     brand colour: the mark never uses it. */
  --pg-accent-edge: #8A70E8;
  --pg-focus-ring: #73C1F8;
  --pg-mark: #FFFFFF;
  --pg-mark-ring: transparent;
  --pg-link: #73C1F8;
  --pg-highlight: #F49A31;
  --pg-danger: #E66D9A;
  --pg-success: #73C1F8;
}

:root:has(#pg-theme-light:checked) {
  color-scheme: light;
  --pg-bg: #FFFFFF;
  --pg-surface: #F0F2F4;
  --pg-surface-2: #E4E7EB;
  --pg-grid: #E4E7EB;
  --pg-border: #CDD2D9;
  --pg-border-strong: #6E7580;
  --pg-text: #000000;
  --pg-text-muted: #4F5661;
  --pg-accent: #5432CD;
  --pg-on-accent: #FFFFFF;
  --pg-accent-edge: #5432CD;
  /* Sky Blue is 1.96:1 on white; on light, links and focus are the purple. */
  --pg-focus-ring: #5432CD;
  --pg-mark: #5432CD;
  --pg-mark-ring: transparent;
  --pg-link: #5432CD;
  /* Pink and Orange are under 3:1 on white; their state colours darken. */
  --pg-highlight: #A85A00;
  --pg-danger: #B32E62;
  --pg-success: #1D6797;
}

:root {
  /* Inter, one family for headings and body, served from this site
     (assets/fonts, OFL-1.1: BRAND.md's ruling); the OS font stands in
     while it loads and for a glyph outside its Latin subset. */
  --pg-font-ui: "Inter", system-ui, "Segoe UI", "Ubuntu", "Cantarell", sans-serif;
  --pg-font-mono: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  /* rem, so the visitor's own text size setting scales the whole page. */
  /* The footer's legal line; 13 px, VISUAL_DIRECTION V5's floor. */
  --pg-text-xs: 0.8125rem;
  --pg-text-sm: 0.875rem;
  --pg-text-md: 1rem;
  --pg-text-lg: 1.125rem;
  --pg-text-xl: 1.375rem;
  --pg-text-2xl: 1.75rem;
  --pg-text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --pg-text-display: clamp(2.75rem, 1.25rem + 6vw, 6rem);
  --pg-leading: 1.6;
  --pg-leading-tight: 1.15;
  --pg-leading-display: 1.02;
  --pg-space-1: 4px;
  --pg-space-2: 8px;
  --pg-space-3: 12px;
  --pg-space-4: 16px;
  --pg-space-5: 24px;
  --pg-space-6: 32px;
  --pg-space-7: 48px;
  --pg-space-8: 64px;
  --pg-space-9: 96px;
  --pg-radius-sm: 2px;
  --pg-radius-md: 4px;
  --pg-line: 1px;
  --pg-focus: 2px;
  --pg-mark-size: 24px;
  --pg-mark-hero: clamp(48px, 9vw, 72px);
  /* The header and footer logotype; its width follows from the file. */
  --pg-logotype: 28px;
  --pg-measure: 68ch;
  --pg-measure-hero: 12ch;
  --pg-measure-lede: 44ch;
  --pg-tracking-tight: -0.03em;
  --pg-tracking-wide: 0.08em;
  --pg-page: 1120px;
  --pg-header: 4.5rem;
  --pg-motion: 120ms ease-out;
  /* The one entrance: the page fades in, once, and only when the visitor
     hasn't asked for reduced motion (site.css gates it on the query). */
  --pg-fade: 360ms ease-out;
}

/* The two weights site.css sets, Latin only (scripts/site/fonts.cjs). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/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+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: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-700.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pg-motion: 0ms;
    --pg-fade: 0ms;
  }
}

/* Pigeon site styles, website v2. Every value is a token from tokens.css.
   The direction: true black, sharp, clear, warm, roomy, with no shading at
   all: no shadows, no gradients, no glow. The one futuristic touch is
   structural: every block hangs between the same two 1 px rails, and grids
   are ruled with 1 px lines. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The sticky header must not cover a #fragment's target. */
  scroll-padding-top: var(--pg-header);
}

body {
  margin: 0;
  background: var(--pg-bg);
  color: var(--pg-text);
  font-family: var(--pg-font-ui);
  font-size: var(--pg-text-md);
  line-height: var(--pg-leading);
}

/* The one motion: the page fades in, once. Without the query's match (the
   visitor asked for reduced motion, or the browser can't say) nothing moves. */
@media (prefers-reduced-motion: no-preference) {
  main {
    animation: pg-fade var(--pg-fade) both;
  }
}

@keyframes pg-fade {
  from {
    opacity: 0;
  }
}

a {
  color: var(--pg-link);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: var(--pg-focus);
}

:focus-visible {
  outline: var(--pg-focus) solid var(--pg-focus-ring);
  outline-offset: var(--pg-focus);
}

.skip {
  position: absolute;
  z-index: 2;
  left: var(--pg-space-4);
  top: calc(-1 * var(--pg-space-9));
  padding: var(--pg-space-2) var(--pg-space-4);
  background: var(--pg-accent);
  color: var(--pg-on-accent);
  border-radius: var(--pg-radius-sm);
}

.skip:focus {
  top: var(--pg-space-4);
}

/* Every block's wrap carries the two rails, so they run unbroken from the
   header to the footer. */
.wrap {
  max-width: var(--pg-page);
  margin: 0 auto;
  padding: 0 var(--pg-space-6);
  border-left: var(--pg-line) solid var(--pg-grid);
  border-right: var(--pg-line) solid var(--pg-grid);
}

.eyebrow {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: var(--pg-tracking-wide);
  text-transform: uppercase;
  color: var(--pg-text-muted);
  margin: 0 0 var(--pg-space-4);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pg-bg);
  border-bottom: var(--pg-line) solid var(--pg-border);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-space-3) var(--pg-space-6);
  padding-top: var(--pg-space-3);
  padding-bottom: var(--pg-space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-space-3);
  color: var(--pg-text);
  font-weight: 700;
  font-size: var(--pg-text-lg);
  letter-spacing: var(--pg-tracking-tight);
  text-decoration: none;
}

.site-header .brand {
  margin-right: auto;
}

/* The brand files are drawn once, by scripts/site/brand.py, into
   assets/brand/. Each slot carries the on-black and the colour file; the
   theme switch shows one. */
.logotype {
  display: block;
  height: var(--pg-logotype);
  width: auto;
}

img.on-light {
  display: none;
}

:root:has(#pg-theme-light:checked) img.on-light {
  display: block;
}

:root:has(#pg-theme-light:checked) img.on-dark {
  display: none;
}

.mark {
  display: block;
  width: var(--pg-mark-size);
  height: var(--pg-mark-size);
  flex: none;
}

/* droppings.io shares this stylesheet and still draws its mark as a span. */
span.mark {
  border-radius: 50%;
  background: var(--pg-mark);
  border: var(--pg-line) solid var(--pg-mark-ring);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-space-1) var(--pg-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--pg-text);
  text-decoration: none;
  font-size: var(--pg-text-sm);
  padding: var(--pg-space-2) 0;
  display: inline-block;
  border-bottom: var(--pg-focus) solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"] {
  border-bottom-color: var(--pg-focus-ring);
}

/* Type */

h1,
h2,
h3 {
  line-height: var(--pg-leading-tight);
  margin: 0 0 var(--pg-space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--pg-text-3xl);
  letter-spacing: var(--pg-tracking-tight);
}

h2 {
  font-size: var(--pg-text-xl);
  margin-top: var(--pg-space-7);
}

h3 {
  font-size: var(--pg-text-lg);
  margin-top: var(--pg-space-6);
}

p,
ul,
ol,
dl,
table,
pre {
  margin: 0 0 var(--pg-space-4);
}

li + li {
  margin-top: var(--pg-space-2);
}

/* Lists laid out as rows or grids space themselves with gap. */
.site-nav li + li,
.promises li + li,
.steps li + li,
.platforms li + li,
.doc-list li + li,
.cards li + li {
  margin-top: 0;
}

code,
pre,
kbd {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-sm);
}

code {
  overflow-wrap: anywhere;
}

pre {
  background: var(--pg-surface);
  border: var(--pg-line) solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  padding: var(--pg-space-4);
  overflow-x: auto;
  line-height: var(--pg-leading);
}

.lede {
  font-size: var(--pg-text-lg);
  color: var(--pg-text-muted);
}

.muted {
  color: var(--pg-text-muted);
}

.prose {
  max-width: var(--pg-measure);
}


main {
  display: block;
}

main > .wrap {
  padding-top: var(--pg-space-8);
  padding-bottom: var(--pg-space-9);
}

/* Home */

.hero {
  padding: var(--pg-space-6) 0 var(--pg-space-8);
  display: grid;
  gap: var(--pg-space-6);
  justify-items: start;
}

.hero .mark {
  width: auto;
  height: var(--pg-mark-hero);
}

.hero .eyebrow {
  color: var(--pg-highlight);
}

.hero h1,
.page-title {
  font-size: var(--pg-text-display);
  font-weight: 700;
  max-width: var(--pg-measure-hero);
  margin: 0;
  letter-spacing: var(--pg-tracking-tight);
  line-height: var(--pg-leading-display);
}

.page-title {
  font-size: var(--pg-text-3xl);
  max-width: none;
  margin-bottom: var(--pg-space-5);
}

.hero .lede {
  max-width: var(--pg-measure-lede);
  margin: 0;
  font-size: var(--pg-text-xl);
}

/* A ruled grid: the container draws the top and left line, each cell its
   right and bottom, so lines are never doubled and a short last row leaves
   plain page, not a filled block. */
.promises,
.steps,
.platforms,
.doc-list {
  list-style: none;
  padding: 0;
  margin: var(--pg-space-6) 0;
  display: grid;
  border-top: var(--pg-line) solid var(--pg-border);
  border-left: var(--pg-line) solid var(--pg-border);
}

.promises {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.steps {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
}

.promises li,
.steps li,
.platforms li,
.doc-list li {
  margin: 0;
  padding: var(--pg-space-5);
  border-right: var(--pg-line) solid var(--pg-border);
  border-bottom: var(--pg-line) solid var(--pg-border);
}

.promises li {
  padding: var(--pg-space-6) var(--pg-space-5);
}

.promises .num,
.steps li::before {
  display: block;
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: var(--pg-tracking-wide);
  /* V6: the accent is never text, so the numbers are the muted grey. */
  color: var(--pg-text-muted);
  margin-bottom: var(--pg-space-5);
}

.steps li::before {
  counter-increment: step;
  content: "0" counter(step);
}

.promises h2,
.promises h3,
.steps h2,
.steps h3 {
  font-size: var(--pg-text-xl);
  margin: 0 0 var(--pg-space-3);
}

.promises p,
.steps p {
  color: var(--pg-text-muted);
  margin: 0;
}

.band {
  border-top: var(--pg-line) solid var(--pg-border);
  padding-top: var(--pg-space-8);
  margin-top: var(--pg-space-8);
}

/* The band's line and padding already separate it; the heading's own top
   margin would double the gap. */
.band > h2:first-child,
.band > .eyebrow + h2 {
  margin-top: 0;
}

.band > h2 {
  font-size: var(--pg-text-3xl);
  letter-spacing: var(--pg-tracking-tight);
  max-width: var(--pg-measure-lede);
}

/* Documents */

.doc-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.doc-list a {
  color: var(--pg-text);
  font-weight: 700;
  font-size: var(--pg-text-lg);
  text-decoration: none;
}

.doc-list a:hover {
  text-decoration: underline;
}

.doc-list p {
  margin: var(--pg-space-2) 0 0;
  color: var(--pg-text-muted);
  font-size: var(--pg-text-sm);
}

/* Buttons */

.button {
  display: inline-block;
  padding: var(--pg-space-3) var(--pg-space-5);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-accent);
  color: var(--pg-on-accent);
  font-weight: 700;
  text-decoration: none;
  border: var(--pg-line) solid var(--pg-accent-edge);
}

.button:hover {
  text-decoration: underline;
}

.button-nav {
  padding: var(--pg-space-2) var(--pg-space-4);
  font-size: var(--pg-text-sm);
}

.button-quiet {
  background: transparent;
  color: var(--pg-text);
  border-color: var(--pg-border-strong);
}

.button[aria-disabled="true"] {
  background: transparent;
  color: var(--pg-text-muted);
  border: var(--pg-line) dashed var(--pg-border-strong);
  cursor: not-allowed;
  text-decoration: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-space-3);
  align-items: center;
}

/* Labels: words carry the meaning, the colour only repeats it. */

.tag {
  display: inline-block;
  font-size: var(--pg-text-sm);
  font-weight: 700;
  line-height: var(--pg-leading-tight);
  padding: var(--pg-space-1) var(--pg-space-2);
  border-radius: var(--pg-radius-sm);
  border: var(--pg-line) solid var(--pg-border-strong);
  color: var(--pg-text-muted);
  vertical-align: middle;
  white-space: nowrap;
}

/* A platform's state is a sentence; in a card it may wrap. */
.card .tag {
  white-space: normal;
}

.tag-built {
  border-color: var(--pg-success);
  color: var(--pg-success);
}

.tag-planned,
.tag-coming {
  border-style: dashed;
}

.tag-draft {
  border-color: var(--pg-danger);
  color: var(--pg-danger);
}

/* Cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pg-space-5);
  margin: var(--pg-space-6) 0;
  padding: 0;
  list-style: none;
}

.card {
  margin: 0;
  background: var(--pg-surface);
  border: var(--pg-line) solid var(--pg-border);
  border-radius: var(--pg-radius-md);
  padding: var(--pg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--pg-space-3);
  min-width: 0;
}

.card h2,
.card h3 {
  margin: 0;
  font-size: var(--pg-text-lg);
}

.card p {
  margin: 0;
}

.card .actions {
  margin-top: auto;
  padding-top: var(--pg-space-3);
}

.card a.card-link {
  color: var(--pg-text);
  text-decoration: none;
}

.card a.card-link:hover {
  text-decoration: underline;
}

.checksum {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-sm);
  overflow-wrap: anywhere;
  color: var(--pg-text-muted);
}

.note {
  border-left: var(--pg-focus) solid var(--pg-border-strong);
  padding: var(--pg-space-1) 0 var(--pg-space-1) var(--pg-space-4);
  margin: var(--pg-space-5) 0;
  max-width: var(--pg-measure);
}

.note-draft {
  border-left-color: var(--pg-danger);
}

/* Tables */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--pg-space-4);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--pg-text-sm);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--pg-space-2) var(--pg-space-3);
  border-bottom: var(--pg-line) solid var(--pg-border);
}

th {
  color: var(--pg-text);
}

/* Developer pages */

.breadcrumb {
  font-size: var(--pg-text-sm);
  color: var(--pg-text-muted);
  margin-bottom: var(--pg-space-4);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-space-2);
  padding: 0;
  margin: 0;
}

.breadcrumb li + li {
  margin: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--pg-space-2);
}

.sources {
  font-size: var(--pg-text-sm);
  color: var(--pg-text-muted);
}

.related {
  border-top: var(--pg-line) solid var(--pg-border);
  margin-top: var(--pg-space-7);
  padding-top: var(--pg-space-5);
}

.related ul {
  columns: 2 240px;
  padding-left: var(--pg-space-5);
}

/* The download band under every page */

.get {
  border-top: var(--pg-line) solid var(--pg-border);
}

.get .wrap {
  padding-top: var(--pg-space-8);
  padding-bottom: var(--pg-space-8);
}

.get h2 {
  font-size: var(--pg-text-3xl);
  letter-spacing: var(--pg-tracking-tight);
  margin: 0 0 var(--pg-space-3);
}

.platforms {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 0;
}

.platforms li {
  padding: 0;
}

.platform {
  display: flex;
  flex-direction: column;
  gap: var(--pg-space-2);
  height: 100%;
  padding: var(--pg-space-5);
  color: var(--pg-text);
  text-decoration: none;
}

.platform:hover {
  background: var(--pg-surface-2);
}

.platform:hover .platform-name {
  text-decoration: underline;
}

.platform-name {
  font-weight: 700;
  font-size: var(--pg-text-lg);
}

.platform-state {
  font-size: var(--pg-text-sm);
  color: var(--pg-text-muted);
}

/* Footer */

.site-footer {
  border-top: var(--pg-line) solid var(--pg-border);
  font-size: var(--pg-text-sm);
  color: var(--pg-text-muted);
}

.site-footer .wrap {
  padding-top: var(--pg-space-7);
  padding-bottom: var(--pg-space-6);
}

.footer-top {
  display: grid;
  gap: var(--pg-space-4);
  padding-bottom: var(--pg-space-6);
}

.site-footer .alpha {
  color: var(--pg-text);
  max-width: var(--pg-measure);
  margin: 0;
}

.footer-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--pg-space-6) var(--pg-space-5);
  padding: var(--pg-space-6) 0;
  border-top: var(--pg-line) solid var(--pg-border);
}

.footer-map h2 {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  font-weight: 400;
  letter-spacing: var(--pg-tracking-wide);
  text-transform: uppercase;
  color: var(--pg-text-muted);
  margin: 0 0 var(--pg-space-4);
}

/* A flat footer list (droppings.io's footer). */
.site-footer > .wrap > nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-space-2) var(--pg-space-5);
  list-style: none;
  padding: 0;
}

.site-footer > .wrap > nav li + li {
  margin: 0;
}

.site-footer > .wrap > nav a {
  color: var(--pg-text-muted);
}

.footer-map ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-map li + li {
  margin-top: var(--pg-space-2);
}

.footer-map a {
  color: var(--pg-text);
  text-decoration: none;
}

.footer-map a:hover {
  text-decoration: underline;
}

/* The legal line: small words at the very bottom, each one a link into the
   Resources section. */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-space-3) var(--pg-space-6);
  padding-top: var(--pg-space-5);
  border-top: var(--pg-line) solid var(--pg-border);
  font-size: var(--pg-text-xs);
}

.footer-base ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-space-1) var(--pg-space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-base li + li {
  margin: 0;
}

.footer-base a {
  color: var(--pg-text-muted);
}

.footer-base p {
  margin: 0;
}

/* The theme switch drives tokens.css through :has(); the input itself is an
   ordinary, labelled checkbox. */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-space-2);
  color: var(--pg-text-muted);
  cursor: pointer;
}

.theme-switch input {
  width: var(--pg-space-4);
  height: var(--pg-space-4);
  margin: 0;
  accent-color: var(--pg-accent);
}

/* Media queries can't read custom properties; this is the one breakpoint.
   Below it the rails go (no room) and the header scrolls away with the page. */
@media (max-width: 560px) {
  .wrap {
    padding: 0 var(--pg-space-4);
    border-left: 0;
    border-right: 0;
  }

  .site-header {
    position: static;
  }

  html {
    scroll-padding-top: 0;
  }

  .site-nav ul {
    gap: var(--pg-space-1) var(--pg-space-4);
  }

  .site-nav {
    order: 3;
    width: 100%;
  }

  main > .wrap {
    padding-top: var(--pg-space-6);
    padding-bottom: var(--pg-space-8);
  }

  .hero {
    padding-top: var(--pg-space-2);
  }
}

/* Droppings: the few rules the main site's stylesheet doesn't have. Tokens
   only, as on the main site (scripts/site/check.py --src holds it to that). */

.brand-sub {
  font-weight: 400;
  font-size: var(--pg-text-sm);
  color: var(--pg-text-muted);
  margin-left: var(--pg-space-2);
}

.preview-banner {
  margin: 0;
  padding: var(--pg-space-2) var(--pg-space-4);
  border-bottom: var(--pg-focus) solid var(--pg-danger);
  background: var(--pg-surface);
  color: var(--pg-text);
  text-align: center;
}

.kicker {
  font-size: var(--pg-text-sm);
  font-weight: 700;
  color: var(--pg-text-muted);
  margin: 0;
}

/* The count is the page: one large figure, the words beside it. */
.count {
  border-left: var(--pg-focus) solid var(--pg-accent);
  padding: var(--pg-space-2) 0 var(--pg-space-2) var(--pg-space-5);
  margin: var(--pg-space-6) 0;
}

.count p {
  margin: var(--pg-space-1) 0;
}

.count-figure {
  font-size: var(--pg-text-display);
  font-weight: 700;
  line-height: var(--pg-leading-tight);
  letter-spacing: var(--pg-tracking-tight);
  color: var(--pg-text);
}

.count-figure span {
  font-size: var(--pg-text-xl);
  font-weight: 400;
  letter-spacing: normal;
}

.empty {
  background: var(--pg-surface);
  border: var(--pg-line) solid var(--pg-border);
  border-radius: var(--pg-radius-md);
  padding: var(--pg-space-5);
  margin: var(--pg-space-5) 0;
}

.empty p {
  margin: 0 0 var(--pg-space-2);
}

.empty p:last-child {
  margin-bottom: 0;
}

caption {
  text-align: left;
  font-weight: 700;
  padding: 0 0 var(--pg-space-2);
}

.footnotes {
  font-size: var(--pg-text-sm);
  color: var(--pg-text-muted);
}

.field-names code {
  white-space: nowrap;
}

.fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--pg-space-2) var(--pg-space-5);
}

.fields dt {
  font-weight: 700;
}

.fields dd {
  margin: 0;
}

/* On a phone a three-column table of sentences is unreadable: each row
   becomes a block, and each cell names its column. */
@media (max-width: 560px) {
  .stack thead {
    position: absolute;
    clip-path: inset(50%);
    width: var(--pg-line);
    height: var(--pg-line);
    overflow: hidden;
  }

  .stack tr,
  .stack th,
  .stack td {
    display: block;
  }

  .stack tr {
    border-bottom: var(--pg-line) solid var(--pg-border);
    padding: var(--pg-space-2) 0;
  }

  .stack th,
  .stack td {
    border: 0;
    padding: var(--pg-space-1) 0;
  }

  .stack td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: var(--pg-text-muted);
  }

  .fields {
    grid-template-columns: 1fr;
  }
}