/* The portal, set in the brand it describes.
 *
 * The typeface is served out of the asset library, so this stylesheet is also
 * a test: if the brand's typeface does not render, the fonts are not in the
 * database. The brand colour arrives as a custom property from the colour section, defined
 * inline by the page; everything here is a fallback for an empty database.
 *
 * Discipline: a 12-column grid whose faint guides run through every page,
 * two voices of type (the brand sans at display sizes, small uppercase mono for every
 * label, count and caption), hairlines instead of boxes, full-bleed colour
 * fields, one easing curve.
 *
 * Token contract (shared with the graph page): --brand, --bg, --ink come
 * from the database; --surface, --muted, --line, --radius and --header-h are
 * derived here.
 *
 * Layers: everything here and in graph.css is `@layer base`; a brand's
 * overlay is `@layer brand`, declared after it, so an overlay rule wins over
 * any rule here whatever its specificity. Element `style` attributes, which
 * outrank every layer, still win over both; the asset pages and graph.js set
 * some. The inline :root block in the page shell is in
 * `base` too: unlayered it would beat the dark-mode html:root rule below,
 * which relies on out-ranking it by specificity.
 */

@layer base, brand;

@layer base {


/* ---- tokens ---- */

:root {
  /* From the database (base.html overrides these inline). */
  --brand: #333333;
  --bg: #ffffff;
  --ink: #121212;

  /* The shared palette. Nothing else is used. */
  --paper: #ffffff;
  --grey: #6b6b6b;
  --grey-2: #a3a3a3;
  --hair: rgb(18 18 18 / 0.13);
  --black: #0b0b0c;
  --charcoal: #121212;
  --hair-dark: rgb(255 255 255 / 0.13);
  --blue: #0066ff;          /* the single interactive accent */
  --blue-tint: #8fb3ff;     /* accents on dark and blue fields only */

  /* Roles, built from the palette. */
  --text: var(--charcoal);   /* ink, #121212 */
  --frame: color-mix(in srgb, var(--charcoal) 6%, var(--paper));   /* light ground for previews */
  --muted: var(--grey);
  --surface: rgb(18 18 18 / 0.04);
  --line: var(--hair);
  --line-strong: rgb(18 18 18 / 0.3);
  --guide: rgb(18 18 18 / 0.055);
  --night: var(--black);
  --on-night: var(--paper);
  --accent: var(--blue);
  --on-accent: var(--paper);
  --mark: rgb(0 102 255 / 0.16);
  --warn: var(--ink);
  --code-bg: rgb(18 18 18 / 0.04);
  --wash: var(--surface);

  /* Content-type markers. */
  --t-section: var(--blue);
  --t-chunk: var(--brand);
  --t-doc: var(--grey);
  --t-asset: var(--ink);

  --radius: 0px;
  --header-h: 64px;
  --gx: clamp(16px, 1.6vw, 28px);       /* outer margin */
  --gut: clamp(12px, 1.25vw, 22px);     /* gutter */
  --cols: 12;
  --measure: 70ch;
  --ease: cubic-bezier(0.2, 0.9, 0.1, 1);
  --t: 200ms;

  --sans: var(--brand-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  --mono: var(--brand-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace);

  /* The column guides, centred in the gutters like the reference grid. */
  --guides: linear-gradient(to right, var(--guide) 1px, transparent 1px);
  --guides-size: calc((100% - 2 * var(--gx) + var(--gut)) / var(--cols)) 100%;
  --guides-pos: calc(var(--gx) - var(--gut) / 2) 0;

  color-scheme: light;
}

/* Dark mode is neutral black and charcoal, never tinted. html:root
 * out-ranks the inline :root block in base.html. */
@media (prefers-color-scheme: dark) {
  html:root {
    --bg: var(--black);
    --text: var(--paper);
    --muted: var(--grey-2);
    --surface: rgb(255 255 255 / 0.05);
    --line: var(--hair-dark);
    --line-strong: rgb(255 255 255 / 0.3);
    --guide: rgb(255 255 255 / 0.05);
    --night: var(--charcoal);
    --code-bg: var(--charcoal);
    --accent: var(--blue-tint);
    --on-accent: var(--black);
    --mark: rgb(143 179 255 / 0.28);
    --warn: var(--paper);
    --t-chunk: var(--blue-tint);
    --t-doc: var(--grey-2);
    --t-asset: var(--paper);
    color-scheme: dark;
  }
}

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

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--guides);
  background-size: var(--guides-size);
  background-position: var(--guides-pos);
  background-repeat: repeat-x;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-strong);
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.field :focus-visible { outline-color: var(--blue-tint); }

::selection { background: var(--accent); color: var(--on-accent); }

code, kbd, pre, .digest { font-family: var(--mono); font-size: 0.82em; }
:not(pre) > code { overflow-wrap: anywhere; }

pre {
  margin: 1rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--code-bg);
  overflow-x: auto;
  line-height: 1.65;
  font-size: 0.82rem;
  tab-size: 2;
}
pre code { font-size: inherit; }

.skip { position: absolute; left: -999px; top: 0.5rem; }
.skip:focus { left: 0.5rem; background: var(--text); color: var(--bg); padding: 0.6rem 1rem; z-index: 20; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[x-cloak] { display: none !important; }

/* The second voice: small uppercase mono for every label, count and caption. */
.lab, .meta, .crumbs, .chip, .tag, kbd, .chrome nav a, .identity-meta em,
.chrome-foot, dl.fields dt, th, .ix-n, .ix-meta, .name, .shot .meta,
.eyebrow, .numeral dt, .ask-n, .count, .find input, .note, .text-link, .btn,
:where(button) {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.45;
}
.meta, .lab, .crumbs, .chrome-foot, dl.fields dt, th, .ix-n, .ix-meta, .shot .meta, .count, .note { color: var(--muted); }

/* A 12-column row; children choose their span. */
.row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gut);
}

/* Full-bleed colour fields carry their own guides. */
.field {
  --guide: rgb(255 255 255 / 0.09);
  --accent: var(--blue-tint);
  --on-accent: var(--black);
  --line: var(--hair-dark);
  margin-inline: calc(-1 * var(--gx));
  padding-inline: var(--gx);
  background-image: var(--guides);
  background-size: var(--guides-size);
  background-position: var(--guides-pos);
  background-repeat: repeat-x;
}
.field.brand {
  background-color: var(--brand);
  color: var(--paper);
  --text: var(--paper);
  --bg: var(--brand);
  --muted: rgb(255 255 255 / 0.66);
  --line-strong: rgb(255 255 255 / 0.3);
  --code-bg: rgb(0 0 0 / 0.22);
}
.field.night { background-color: var(--black); color: var(--paper); }
.field .meta, .field .lab, .field .count, .field .ix-n, .field .ask-n { color: rgb(255 255 255 / 0.66); }

/* ---- buttons, links and inputs ---- */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: inherit;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}
.text-link .arrow { transition: transform 400ms var(--ease); }
.text-link:hover .arrow { transform: translateX(4px); }
.text-link:hover { color: var(--accent); }

.btn,
:where(button:not(.link)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 2.75rem;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t) var(--ease), background var(--t) var(--ease);
}
.btn:hover,
:where(button:not(.link)):hover { background: var(--accent); color: var(--on-accent); }
.field .btn { background: var(--paper); color: var(--brand); }
.field .btn:hover { background: var(--blue-tint); color: var(--black); }
:where(button.quiet, button.danger) {
  background: none;
  color: var(--muted);
  padding: 0;
  min-height: auto;
}
:where(button.quiet, button.danger):hover { color: var(--text); opacity: 1; }

:where(input[type="text"], input[type="search"], input[type="password"], input:not([type])) {
  font: inherit;
  color: var(--text);
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  transition: border-color var(--t) var(--ease);
}
input::placeholder { color: var(--muted); opacity: 1; }
:where(input[type="text"], input[type="search"], input[type="password"], input:not([type])):focus {
  outline: none;
  border-bottom-color: var(--accent);
}
input[type="search"]::-webkit-search-cancel-button { display: none; }

button.link {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
  padding: 0;
}
button.link:hover { color: var(--accent); text-decoration-color: currentColor; }

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

.chrome {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: center;
  padding: 0 var(--gx);
  background-color: var(--bg);
  background-image: var(--guides);
  background-size: var(--guides-size);
  background-position: var(--guides-pos);
  background-repeat: repeat-x;
  color: var(--text);
}
.identity {
  grid-column: 1 / span 3;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.identity img { display: block; height: 18px; width: auto; align-self: center; }
/* `display: block` above is an author rule and outranks the user agent's
   `[hidden] { display: none }`, so a wordmark that 404s would sit broken
   beside the name the onerror handler reveals. */
.identity img[hidden], .identity b[hidden] { display: none; }
.identity b { font-weight: 500; font-size: 1.05rem; }
.identity-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
}
.identity-meta em { font-style: normal; color: var(--muted); font-size: 10.5px; }

.chrome nav {
  grid-column: 4 / span 6;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  height: 100%;
}
.chrome nav::-webkit-scrollbar { display: none; }
.chrome nav a {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 100%;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.chrome nav a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background var(--t) var(--ease);
}
.chrome nav a:hover { color: var(--text); }
.chrome nav a { position: relative; }
.chrome nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease);
}
.chrome nav a[aria-current="page"] { color: var(--text); }
.chrome nav a[aria-current="page"]::before { background: var(--accent); border-color: var(--accent); }
.chrome nav a[aria-current="page"]::after { transform: scaleX(1); }

.chrome .find { grid-column: 10 / span 3; position: relative; margin: 0; justify-self: stretch; }
.chrome .find input { width: 100%; min-height: 2.25rem; padding-right: 2rem; }
.find kbd {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.find input:focus + kbd,
.find input:not(:placeholder-shown) + kbd { opacity: 0; }

.find-link {
  display: none;
  grid-column: 12;
  justify-self: end;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
}
.find-link svg { width: 20px; height: 20px; }

/* Over the graph's black ground, the bar turns black too. */
body:has(.graph3d) .chrome {
  --guide: rgb(255 255 255 / 0.05);
  --muted: var(--grey-2);
  --accent: var(--blue-tint);
  --text: var(--paper);
  background-color: var(--black);
  color: var(--paper);
}
body:has(.graph3d) .chrome .find input { color: var(--paper); border-bottom-color: rgb(255 255 255 / 0.3); }
body:has(.graph3d) .chrome .identity img { filter: invert(1); }

.banner {
  margin: 1rem var(--gx) 0;
  padding: 1rem 0;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.banner strong { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warn); margin-right: 0.75rem; }

main {
  flex: 1;
  width: 100%;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gx) clamp(5rem, 12vw, 10rem);
}
/* The graph page brings its own full-bleed canvas. */
main:has(> .graph3d) { padding: 0; }
main > section + section,
main > section + .field,
main > .field + section { margin-top: clamp(5rem, 11vw, 9rem); }
main > .field + .field { margin-top: 0; }
main > .marks { margin-bottom: clamp(5rem, 11vw, 9rem); }
main:has(> .field:last-child) { padding-bottom: 0; }

.chrome-foot {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gut);
  row-gap: 0.5rem;
  align-items: baseline;
  padding: 1.25rem var(--gx);
  border-top: 1px solid var(--line);
}
.chrome-foot > :nth-child(1) { grid-column: 1 / span 4; }
.chrome-foot > :nth-child(2) { grid-column: 5 / span 6; }
.chrome-foot > :nth-child(3) { grid-column: 11 / span 2; justify-self: end; }
.chrome-foot form { margin: 0; }

/* ---- type ---- */

h1, h2, h3 { text-wrap: balance; font-weight: 400; }

h1 {
  font-size: clamp(2.75rem, 7.2vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
}
h2 {
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
}
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
h4, h5 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

p { margin: 0 0 1rem; }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 34rem;
  margin: 0;
}
.empty { color: var(--muted); max-width: var(--measure); padding: 1.25rem 0; border-top: 1px solid var(--line); margin: 0; }
.prose { max-width: var(--measure); margin: 0; }
.path { font-size: clamp(1.75rem, 4.2vw, 4rem); letter-spacing: -0.03em; overflow-wrap: anywhere; line-height: 1; }

.tag { color: var(--muted); }
.tag::before { content: "\00b7\00a0"; }
.tag.warn { color: var(--warn); }

.crumbs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; min-width: 0; margin-bottom: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--line-strong); }
.crumbs span:not(.sep) { color: var(--text); overflow-wrap: anywhere; }

/* Page heads: a mono label row above a hairline, then the title. */
.page-head { margin-bottom: clamp(3rem, 8vw, 6rem); }
.page-head .head-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: clamp(2rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { max-width: 16ch; }
.page-head .path { max-width: none; }
.page-head .meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 1.5rem 0 0; }
.page-head .meta .dot { display: none; }
.page-head .meta code { font-size: inherit; text-transform: none; }
.page-head .lede { margin-top: 1.75rem; color: var(--muted); }

.eyebrow { display: inline-flex; align-items: center; gap: 0.6em; margin: 0; color: var(--text); }
.eyebrow.t::before { content: ""; width: 7px; height: 7px; background: var(--hue, currentColor); }
.t-section { --hue: var(--t-section); }
.t-chunk { --hue: var(--t-chunk); }
.t-doc { --hue: var(--t-doc); }
.t-asset { --hue: var(--t-asset); }

/* A section label: mono text over a hairline, the reference's quiet header. */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-strong);
}
.field .sec-head { border-bottom-color: rgb(255 255 255 / 0.35); }
.sec-head h2 { font: inherit; letter-spacing: inherit; margin: 0; }

/* ---- index lists ---- */

ul.ix { list-style: none; margin: 0; padding: 0; counter-reset: ix; }
ul.ix > li { counter-increment: ix; position: relative; border-bottom: 1px solid var(--line); }
ul.ix > li > a {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: baseline;
  padding: clamp(0.4rem, 1vw, 0.75rem) 0 clamp(0.6rem, 1.2vw, 1rem);
  color: inherit;
  text-decoration: none;
}
.ix-n { grid-column: 1; }
.ix-n::before { content: counter(ix, decimal-leading-zero); }
.ix-t {
  grid-column: 2 / span 7;
  font-size: clamp(2rem, 5.4vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
  transition: transform 500ms var(--ease);
}
.ix-meta { grid-column: 9 / span 3; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.ix-meta code { font-size: inherit; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.ix-go { grid-column: 12; justify-self: end; font-size: 1.1rem; transition: transform 500ms var(--ease); }
ul.ix > li > a:hover .ix-t { transform: translateX(0.4rem); }
ul.ix > li > a:hover .ix-go { transform: translateX(0.35rem); }
ul.ix > li > a:hover .ix-meta { color: var(--text); }
ul.ix > li > a:hover .ix-t, ul.ix > li > a:hover .ix-go { color: var(--accent); }

/* A quieter index for long lists (research, chunks, mentions, search). */
ul.ix.small .ix-t { font-size: clamp(1.25rem, 2.2vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
ul.ix.small > li > a { padding: 0.85rem 0 1rem; }
ul.ix .snippet { grid-column: 2 / span 7; }

/* ---- overview ---- */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(88svh - var(--header-h));
  margin-top: calc(-1 * clamp(2.5rem, 7vw, 6rem));
  padding-top: 1.25rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.head-top { display: flex; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; }
.hero h1 {
  font-size: clamp(4.5rem, 19vw, 19rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  margin: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem) -0.05em;
}
.hero .row { align-items: end; row-gap: 1.5rem; }
.hero .lede { grid-column: 1 / span 5; }
.hero-actions { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: flex-end; }

/* Marks framed like photographs, captioned with their file name. */
.marks { row-gap: 2rem; margin-top: clamp(3rem, 7vw, 5rem); }
.marks a { grid-column: span 2; display: block; color: inherit; text-decoration: none; min-width: 0; }
.marks .frame { aspect-ratio: 4 / 3; margin-bottom: 0.6rem; background: var(--frame); }
.marks a.reversed .frame { background: var(--black); }
.marks img { width: 100%; height: 100%; object-fit: contain; padding: 22%; transition: transform 700ms var(--ease); }
.marks a:hover img { transform: scale(1.04); }

/* Giant numerals on a black field. */
.numeral { padding-top: 1.25rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.numeral .big {
  display: block;
  font-size: clamp(7rem, 30vw, 30rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-weight: 300;
  margin: clamp(3rem, 8vw, 7rem) 0 clamp(1.5rem, 3vw, 2.5rem) -0.06em;
  font-variant-numeric: tabular-nums;
}
.numeral .row { align-items: end; row-gap: 1.25rem; }
.numeral .cap { grid-column: 1 / span 4; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.35; margin: 0; }
.numeral dl { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); margin: 0; }
.numeral dl div { border-top: 1px solid rgb(255 255 255 / 0.25); padding-top: 0.6rem; }
.numeral dd { margin: 0; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.1; font-weight: 300; }
.numeral dt { color: rgb(255 255 255 / 0.66); }

/* Asset kinds: a three-column numbered grid. */
.kinds { counter-reset: kind; row-gap: 0; }
.kinds a {
  counter-increment: kind;
  grid-column: span 4;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: baseline;
  gap: 0 0.75rem;
  padding: 0.85rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.kinds a::before {
  content: counter(kind, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}
.kinds span { font-size: clamp(1.4rem, 2.4vw, 2.1rem); letter-spacing: -0.025em; text-transform: capitalize; line-height: 1.1; }
.kinds b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--muted); }
.kinds a:hover span { color: var(--accent); }

/* What an agent can ask, on a field of the brand colour. */
.ask { padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.ask ol { list-style: none; margin: 0; padding: 0; counter-reset: ask; row-gap: 0; }
.ask li {
  counter-increment: ask;
  grid-column: span 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  column-gap: var(--gut);
  align-items: baseline;
  padding: 0.9rem 0 1.4rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ask li::before {
  content: counter(ask, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.66);
}
.ask .ask-foot { margin-top: 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* ---- section bodies ---- */

.section-body .group { margin: 0; }
.section-body > dl.fields,
.section-body > .group,
.section-body > ul.plain,
.section-body > p.prose { margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.section-body > .group > h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 0;
}
.section-body .group .group { margin-top: 2rem; }
.section-body .group .group > :is(h3, h4, h5) { margin-bottom: 0.75rem; }

dl.fields {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gut);
  margin: 0;
}
dl.fields dt,
dl.fields dd { padding: 0.85rem 0 1rem; border-bottom: 1px solid var(--line); }
dl.fields dt { grid-column: 1 / span 3; padding-top: 1.05rem; }
dl.fields dd { grid-column: 4 / span 7; margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 1.1rem; line-height: 1.45; }

/* Arrays of objects: an open grid, items under a hairline. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 2.5rem var(--gut);
  margin: 1.5rem 0 0;
}
.card { min-width: 0; padding-top: 0.25rem; border-top: 1px solid var(--line-strong); }
/* Top-level arrays snap to the 12 columns: four items a row. */
.section-body .cards:not(.card .cards) { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.section-body .cards:not(.card .cards) > .card { grid-column: span 3; }
@media (max-width: 64rem) { .section-body .cards:not(.card .cards) > .card { grid-column: span 6; } }
@media (max-width: 48rem) { .section-body .cards:not(.card .cards) > .card { grid-column: 1 / -1; } }
.card dl.fields { grid-template-columns: minmax(0, 1fr); }
.card dl.fields dt, .card dl.fields dd { grid-column: 1; border: 0; }
.card dl.fields dt { padding: 0.8rem 0 0; }
.card dl.fields dd { padding: 0.15rem 0 0; font-size: 1rem; }
.card .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem var(--gut); }
.card .card { border-top-color: var(--line); }
.card .group { margin-top: 1.5rem; }

ul.plain { margin: 0; padding: 0; list-style: none; max-width: none; }
ul.plain li { padding: 0.75rem 0 0.9rem; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
dd ul.plain li, .card ul.plain li { font-size: 1rem; padding: 0.35rem 0; border: 0; }

.swatch { display: inline-flex; align-items: center; gap: 0.75rem; }
.swatch i { width: 2.5rem; height: 2.5rem; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px var(--line); }
.swatch code { font-size: 0.8rem; }
.inline-asset { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; max-width: 100%; }
.inline-asset img { height: 44px; width: auto; max-width: 110px; padding: 8px; background: var(--frame); object-fit: contain; }
.inline-asset:hover code { text-decoration: underline; }

.chunks { margin-top: clamp(5rem, 11vw, 9rem); }
.chunks .sec-head { margin-bottom: 0; }
.chunks > .lede { color: var(--muted); margin: 1.25rem 0 2rem; max-width: 40rem; }

/* ---- assets ---- */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0 0 clamp(2.5rem, 6vw, 4rem); padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-strong); }
.chip { color: var(--muted); text-decoration: none; display: inline-flex; gap: 0.5em; align-items: center; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.chip b { font-weight: 500; }
.chip:hover { color: var(--text); }
.chip.on { color: var(--accent); }
.chip.on::before { background: currentColor; }

.gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) var(--gut);
}
.shot { grid-column: span 3; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; }
.frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--frame);
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.frame img { width: 100%; height: 100%; object-fit: contain; padding: 16%; transition: transform 900ms var(--ease); }
.frame.photo img { object-fit: cover; padding: 0; }
.shot:hover .frame img { transform: scale(1.05); }
.frame.reversed { background-color: var(--black); }
.frame .glyphs { font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.03em; color: var(--charcoal); }
.name { display: block; overflow-wrap: anywhere; text-transform: uppercase; color: var(--text); }
.shot .meta { margin: 0.15rem 0 0; }
.shot:hover .name { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.locked, .ext { color: var(--grey); font-family: var(--mono); font-size: 11px; text-transform: uppercase; padding: 0.5rem; text-align: center; }

/* A chequerboard tells you whether a mark has a transparent background. */
.checker {
  background-color: var(--paper);
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--charcoal) 8%, var(--paper)) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--charcoal) 8%, var(--paper)) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--charcoal) 8%, var(--paper)) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--charcoal) 8%, var(--paper)) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.checker.reversed {
  background-color: var(--black);
  background-image:
    linear-gradient(45deg, var(--charcoal) 25%, transparent 25%),
    linear-gradient(-45deg, var(--charcoal) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--charcoal) 75%),
    linear-gradient(-45deg, transparent 75%, var(--charcoal) 75%);
}

.asset-layout { row-gap: 2.5rem; align-items: start; }
.asset-layout > .stage-wrap { grid-column: 1 / span 8; }
.asset-layout > .asset-detail { grid-column: 9 / span 4; }
.stage {
  display: grid;
  place-items: center;
  min-height: clamp(16rem, 58vh, 40rem);
  padding: clamp(1.5rem, 6vw, 5rem);
  background: var(--frame);
  color: var(--charcoal);
  overflow: hidden;
}
.stage img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.stage.reversed { background-color: var(--black); color: var(--paper); }
.stage .empty { border: 0; color: var(--grey); }
.stage-cap { margin-top: 0.6rem; }
.specimen { text-align: center; max-width: 100%; }
.specimen .big { font-size: clamp(3rem, 12vw, 9rem); line-height: 1; margin: 0; letter-spacing: -0.04em; }
.specimen .mid { font-size: clamp(1.1rem, 3vw, 1.75rem); margin: 0.75rem 0; }
.specimen .small { color: var(--grey); margin: 0; }
.asset-actions { display: flex; gap: 1rem 1.75rem; align-items: center; flex-wrap: wrap; margin: 0 0 2rem; }
.asset-detail dl.fields { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.asset-detail dl.fields dt, .asset-detail dl.fields dd { grid-column: 1; }
.asset-detail dl.fields dt { padding-bottom: 0; border: 0; }
.asset-detail dl.fields dd { padding-top: 0.2rem; font-size: 1rem; }
.digest { font-size: 0.75rem; word-break: break-all; }

/* Verbatim text: a mono column of facts beside a readable measure. */
.reading { row-gap: 2rem; align-items: start; }
.reading > .facts { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.reading > .document { grid-column: 4 / span 7; }
.facts dl { margin: 0; }
.facts dt { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-top: 0.75rem; border-top: 1px solid var(--line); }
.facts dd { margin: 0.15rem 0 1rem; overflow-wrap: anywhere; font-size: 0.95rem; }
.facts dd code { font-size: 0.8rem; }
.document {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: var(--measure);
  font-size: 1.12rem;
  line-height: 1.65;
  margin: 0;
}
.document .ext { font-size: 0.8em; }
.note { margin: 1.25rem 0 0; }

/* ---- search ---- */

.find.wide { display: flex; align-items: flex-end; gap: var(--gut); margin: 0; }
.find.wide input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: clamp(2rem, 5vw, 4.5rem);
  letter-spacing: -0.035em;
  text-transform: none;
  font-weight: 400;
  min-height: auto;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--text);
}
.find.wide input::placeholder { color: var(--line-strong); }
.find.wide button { flex: none; }
.snippet {
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0.6rem 0 0;
  max-width: var(--measure);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.snippet mark { background: var(--mark); color: var(--text); padding: 0 0.1em; }

ol.conflicts { list-style: none; margin: 0; padding: 0; counter-reset: conflict; }
ol.conflicts > li {
  counter-increment: conflict;
  border-top: 1px solid var(--line-strong);
  padding: 0.75rem 0 clamp(2.5rem, 6vw, 4.5rem);
}
.conflict-head { display: flex; justify-content: space-between; gap: 1rem; }
.conflict-n::before { content: counter(conflict, decimal-leading-zero); }
.conflict-reason {
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 40ch;
  margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.conflict-sides { row-gap: 1.75rem; }
.conflict-side { grid-column: span 6; min-width: 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.conflict-side h3 { overflow-wrap: anywhere; }
.conflict-side h3 a { color: inherit; }
.conflict-side h3 a:hover { color: var(--accent); }
.conflict-side blockquote {
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--brand);
  max-width: var(--measure);
}

/* ---- standalone pages: login and MCP tokens ---- */

.plain-head {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gx);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.plain-head a { text-decoration: none; }
.plain-head a:hover { color: var(--accent); }
.wordmark { font-size: 1rem; }

body.login { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); padding: 0 var(--gx); min-height: 100dvh; }
.login-field {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  margin-left: calc(-1 * var(--gx));
  padding: 1.25rem var(--gx) clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--brand);
  background-image: linear-gradient(to right, rgb(255 255 255 / 0.09) 1px, transparent 1px);
  background-size: calc((100vw - 2 * var(--gx) + var(--gut)) / var(--cols)) 100%;
  background-position: calc(var(--gx) - var(--gut) / 2) 0;
  color: var(--paper);
}
.login-field .lab { color: rgb(255 255 255 / 0.66); }
.login-field h1 { font-size: clamp(3.5rem, 9vw, 9rem); line-height: 0.85; letter-spacing: -0.05em; margin: 0 0 0 -0.04em; }
.login-form { grid-column: 9 / span 4; align-self: center; padding: 3rem 0; }
.login-form h2 { font-size: clamp(2rem, 3vw, 2.75rem); margin-bottom: 0.75rem; }
.login-form .meta { margin: 0 0 3rem; }
.login-form form { display: grid; gap: 2rem; }
.login-form label { display: grid; gap: 0.25rem; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.login-form input { font-size: 1.25rem; }
.login-form button { width: 100%; min-height: 3rem; }
#login-error { min-height: 1.5rem; margin: 1rem 0 0; }

.error { color: var(--text); border-left: 2px solid var(--accent); padding-left: 0.6rem; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; }

.panel { margin-bottom: clamp(4rem, 9vw, 6rem); }
.panel.field { padding-block: clamp(2.5rem, 6vw, 4rem); }
.panel > .sec-head { margin-bottom: 1.5rem; }
.panel > .lede { color: var(--muted); }
.inline-form { display: flex; gap: 1rem var(--gut); align-items: flex-end; flex-wrap: wrap; margin-top: 2rem; }
.inline-form input { flex: 1 1 18rem; min-width: 0; font-size: 1.35rem; }

#token-result:has(.error) { margin-top: 1.5rem; }

.reveal-token { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.reveal-token p { margin: 0 0 0.5rem; }
.reveal-token pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.connect-title { font: inherit; font-size: 1.35rem; margin: 0 0 1.5rem; }

.jelly { animation: copied-jelly 300ms ease; }
@keyframes copied-jelly {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.15, 0.85); }
  50% { transform: scale(0.9, 1.1); }
  70% { transform: scale(1.05, 0.95); }
}
.snip { margin-top: 1.5rem; }
.snip-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.5rem 1.25rem;
  background: var(--code-bg);
  border-bottom: 1px solid var(--line-strong);
}
.snip-head .lab { color: var(--muted); }
.snip-tools { display: flex; gap: 0.5rem; align-items: center; }
.snip-pick { display: flex; border: 1px solid var(--line-strong); }
.snip-pick button, .snip-copy {
  min-height: auto;
  padding: 0.4rem 0.7rem;
  background: none;
  color: var(--muted);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.snip-pick button {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.snip-pick button svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.snip-pick button.on { background: var(--text); color: var(--bg); }
.snip-pick button:not(.on):hover, .snip-copy:hover { background: none; color: var(--text); }
.snip-copy { padding: 0.4rem; border: 1px solid var(--line-strong); }
.snip-copy svg { width: 1.1rem; height: 1.1rem; }
.snip pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.role-pick, .scope-grid { border: 0; padding: 0; margin: 2rem 0 0; min-width: 0; }
.scope-grid { margin-bottom: 2rem; }
.role-pick .chips { margin: 0.9rem 0 0; }
.chip:has(input) { cursor: pointer; }
.chip:has(input:checked) { color: var(--accent); }
.chip:has(input:checked)::before { background: currentColor; }
.chip:has(input:focus-visible) { color: var(--text); outline: 2px solid var(--accent); outline-offset: 5px; }

.scope-row { display: flex; gap: 1.5rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.scope-row > span { flex: 0 0 6rem; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; color: var(--muted); }
.scope-actions { flex: 0 0 17rem; display: flex; gap: 1.5rem; }
.scope-grant { flex: 1; min-width: 0; margin: 0; font-size: 0.95rem; color: var(--muted); }
.scope-row label { position: relative; display: inline-flex; align-items: center; gap: 0.6em; cursor: pointer; }
.scope-row label:has(:disabled) { cursor: default; color: var(--muted); }
.scope-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.scope-row svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  padding: 2px;
  border: 2px solid currentColor;
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.scope-row svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 101;
  transition: stroke-dashoffset 250ms cubic-bezier(1, 0, 0.37, 0.91);
}
.scope-row input[type="checkbox"]:checked + svg path { stroke-dashoffset: 0; }
.scope-row label:hover > input[type="checkbox"]:not(:disabled) + svg { color: var(--accent); }
.scope-row input[type="checkbox"]:focus-visible + svg { outline: 2px solid var(--accent); outline-offset: 3px; transform: scale(1.03); }
.scope-row label:active > input[type="checkbox"]:not(:disabled) + svg { transform: scale(1.05); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th { text-align: left; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--line-strong); }
td { text-align: left; padding: 1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
td:nth-child(2), td:nth-child(3) { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
td:last-child, th:last-child { text-align: right; padding-right: 0; }
tr.none td { color: var(--muted); text-align: left; font-family: var(--sans); font-size: 1rem; text-transform: none; letter-spacing: 0; }

/* ---- reveal on scroll (the class is only set when motion is welcome) ---- */

html.reveal-on .rv { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
html.reveal-on .rv.in { opacity: 1; transform: none; }

/* ---- graph ---- */

.graph-head {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.graph-tools { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.graph-tools button {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 99px;
  cursor: pointer;
}
.graph-tools button:hover { border-color: var(--brand); color: var(--brand); }
.toggle { font-size: 0.9rem; color: var(--muted); display: inline-flex; gap: 0.35rem; align-items: center; }

figure.graph {
  margin: 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, #ffffff 0%, var(--wash) 70%);
}
figure.graph canvas {
  display: block;
  width: 100%;
  height: min(72vh, 46rem);
  cursor: grab;
  touch-action: none;
}
figure.graph figcaption {
  position: absolute;
  left: 0.85rem;
  bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
}
.legend {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 0.5rem; }
.legend li + li { margin-top: 0.25rem; }
.legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.legend i.dashed {
  border-radius: 0;
  height: 0;
  border-top: 2px dashed #d2622c;
  width: 0.9rem;
}

/* ---- small screens ---- */

@media (max-width: 64rem) {
  .identity-meta em { display: none; }
  .identity { grid-column: 1 / span 4; }
  .chrome nav { grid-column: 5 / span 5; }
  .shot { grid-column: span 4; }
  .marks a { grid-column: span 4; }
  .ix-t { grid-column: 2 / span 7; }
  .reading > .facts { grid-column: 1 / span 4; }
  .reading > .document { grid-column: 5 / span 8; }
}

@media (max-width: 48rem) {
  :root { --cols: 4; }
  .chrome { grid-template-columns: auto minmax(0, 1fr) auto; }
  .identity { grid-column: 1; }
  .identity-meta { display: none; }
  .chrome nav {
    grid-column: 2;
    mask-image: linear-gradient(to right, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
    padding-right: 1.5rem;
    gap: 1rem;
  }
  .chrome .find { display: none; }
  .find-link { display: grid; grid-column: 3; }
  .scope-row { flex-wrap: wrap; gap: 0.75rem 1.5rem; }
  .scope-actions { flex-basis: auto; }
  .scope-grant { flex-basis: 100%; }
  .hero .lede, .hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .numeral .cap, .numeral dl { grid-column: 1 / -1; }
  .kinds a, .ask li { grid-column: 1 / -1; }
  .marks a { grid-column: span 2; }
  .shot { grid-column: span 2; }
  ul.ix > li > a { row-gap: 0.25rem; }
  .ix-n { grid-column: 1 / -1; }
  .ix-t { grid-column: 1 / span 3; grid-row: 2; }
  .ix-go { grid-column: 4; grid-row: 2; }
  .ix-meta, ul.ix .snippet { grid-column: 1 / -1; }
  dl.fields dt, dl.fields dd { grid-column: 1 / -1; }
  dl.fields dt { padding-bottom: 0; border-bottom: 0; }
  dl.fields dd { padding-top: 0.2rem; }
  .asset-layout > .stage-wrap, .asset-layout > .asset-detail { grid-column: 1 / -1; }
  .reading > .facts { grid-column: 1 / -1; position: static; }
  .reading > .document { grid-column: 1 / -1; }
  .conflict-side { grid-column: 1 / -1; }
  .chrome-foot > * { grid-column: 1 / -1 !important; justify-self: start !important; }
  body.login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-field { grid-column: 1; min-height: 42vh; margin-right: calc(-1 * var(--gx)); }
  .login-form { grid-column: 1; }
  .find.wide { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Dark mode: the brand wordmark is black, so it turns light. Previews keep
 * the light ground the files were drawn for. */
@media (prefers-color-scheme: dark) {
  .identity img { filter: invert(1); }
}
}