/* The design language's components (v0, decided 2026-10-01): buttons, tags
   and status capsules, the nav's active capsule, the slot line, the lean-in,
   RER price numerals, ruled rows and open columns, the code line, the
   contact row and the lit element. Built from the tokens in
   frame/frame.css (section 3), which every page loads; the scripts are
   beside this sheet (index.js). The style guide, every component in every
   state, is design/language-v0/.

   Rules the components keep:
   - Cobalt (--rer-signal) marks one small thing per view: a signal tag, the
     code line's cursor or an active marker. It never crosses a glyph.
   - #fff (--rer-lit) is the one lit or active element in a view.
   - One slot line per view, seated in a real slot; one lean per page; at
     most two nods in a view, one per component.
   - Ruled rows and open columns, never card chrome; blocks take 2 px.
   checkLanguage() in rules.js counts these in a view.

   `data-state="hover|active|focus"` holds a control in that state, so the
   style guide can show every state at rest. */

/* Type roles */

.rer-display { font-size: var(--rer-cap-display); color: var(--rer-ink); margin: 0; }
.rer-headline { margin: 0; font: 700 var(--rer-size-headline)/1.08 var(--rer-ui); letter-spacing: -0.02em; color: var(--rer-ink); }
.rer-lead { margin: 0; font: 300 var(--rer-size-lead)/1.45 var(--rer-ui); color: var(--rer-ink); }
.rer-body { margin: 0; font: 400 var(--rer-size-body)/var(--rer-leading, 1.6) var(--rer-ui); color: var(--rer-ink); }
.rer-meta { margin: 0; font: 400 var(--rer-size-meta)/1.4 var(--rer-mono); color: var(--rer-muted); }
/* A version is always Plex, always lower case ("v0.2.1"), never RER. */
.rer-version { font-family: var(--rer-mono); font-weight: 400; text-transform: lowercase; letter-spacing: 0; }

/* The lit element: #fff, once per view. A lit edge is the only 2 px line. */
.rer-lit { color: var(--rer-lit); }
.rer-lit-edge { position: relative; }
.rer-lit-edge::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--rer-lit); }

/* Buttons: the wordmark corner (0.4 of the height on the top-left and
   bottom-right, 2 px on the others), 48 px tall (36 px small), Inter Tight
   600 (C01 measured). Primary is ink on the ground and lights to #fff under
   the pointer; secondary is a 78% ink edge; ghost is a label after an ink
   capsule that runs out under the pointer. Pressed sits 1 px down; focus is
   the site's 2 px #fff ring; disabled drops to muted text on a faint edge. */

.rer-btn {
  --rer-h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--rer-h);
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: calc(var(--rer-h) * var(--rer-corner)) var(--rer-radius);
  background: transparent;
  color: var(--rer-ink);
  font: 600 16px/1 var(--rer-ui);
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rer-quick) var(--rer-ease), border-color var(--rer-quick) var(--rer-ease), color var(--rer-quick) var(--rer-ease), transform var(--rer-fast) var(--rer-ease);
}
.rer-btn--small { --rer-h: 36px; padding: 0 18px; font-size: 14px; gap: 8px; }
.rer-btn__arrow { display: block; flex: none; width: 18px; height: 12px; }
.rer-btn--small .rer-btn__arrow { width: 15px; height: 10px; }

.rer-btn--primary { background: var(--rer-ink); border-color: var(--rer-ink); color: #0d0d0d; }
.rer-btn--primary:is(:hover, [data-state="hover"]) { background: var(--rer-lit); border-color: var(--rer-lit); }

.rer-btn--secondary { border-color: var(--rer-line-strong); }
.rer-btn--secondary:is(:hover, [data-state="hover"]) { border-color: var(--rer-lit); background: rgba(255, 255, 255, 0.06); }

.rer-btn--ghost { padding: 0 4px; gap: 12px; }
.rer-btn--ghost::before { content: ''; flex: none; width: 12px; height: 4px; border-radius: var(--rer-radius); background: currentColor; transition: width var(--rer-quick) var(--rer-ease); }
.rer-btn--ghost:is(:hover, [data-state="hover"]) { color: var(--rer-lit); }
.rer-btn--ghost:is(:hover, [data-state="hover"])::before { width: 20px; }

.rer-btn:is(:active, [data-state="active"]) { transform: translateY(1px); }
.rer-btn:is(:focus-visible, [data-state="focus"]) { outline: 2px solid var(--rer-lit); outline-offset: 3px; }

.rer-btn:is(:disabled, [aria-disabled="true"]) {
  border-color: var(--rer-faint);
  background: transparent;
  color: var(--rer-muted);
  cursor: not-allowed;
  transform: none;
}
.rer-btn--ghost:is(:disabled, [aria-disabled="true"]) { border-color: transparent; }

/* Tags: Plex 12 px, 24 px tall, a 28% ink edge, the wordmark corner. A
   status tag leads with a 10 x 4 capsule: filled when available or running,
   open when in development, cobalt for the one signal in a view (live or
   update ready). */

.rer-tag {
  --rer-h: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--rer-h);
  padding: 0 9px;
  border: 1px solid var(--rer-line);
  border-radius: calc(var(--rer-h) * var(--rer-corner)) var(--rer-radius);
  background: transparent;
  color: var(--rer-ink);
  font: 400 var(--rer-size-label)/1 var(--rer-mono);
  letter-spacing: 0;
  white-space: nowrap;
}
.rer-capsule { display: block; flex: none; width: 10px; height: 4px; border-radius: var(--rer-radius); background: currentColor; }
.rer-capsule--open { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.rer-tag--signal .rer-capsule, .rer-capsule--signal { background: var(--rer-signal); box-shadow: none; }

/* The nav's active link: a 12 x 4 ink capsule under it (C04 measured), on a
   row of links marked .rer-nav. */

.rer-nav a { position: relative; }
.rer-nav a:focus-visible { outline: 2px solid var(--rer-lit); outline-offset: 3px; }
.rer-nav a[aria-current="page"] { color: var(--rer-lit); }
.rer-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(100% + 0.6em);
  width: 12px;
  height: 4px;
  border-radius: var(--rer-radius);
  background: var(--rer-ink);
}

/* The slot line: 1 px of 55% ink run in from the left into a real slot, once
   per view; it never crosses ink or touches Inter Tight. .rer-slot wraps the
   mark (the R slot of its bottom row by default, --top for the top row) or
   a RER display line whose first letter is R, P or D (the open slot at 0.27
   to 0.36 of the cap; the line's font-size is the cap). --rer-slot-run is
   how far the line reaches out to the left. Measured from frame/mark.svg
   and story/src/type: the mark's slots are centred at 10.9% and 78.3% of
   its height and end at 24.7% of its width; the R's slot ends at 0.84 cap. */

.rer-slot { --rer-slot-run: 96px; position: relative; display: inline-block; }
.rer-slot::before {
  content: '';
  position: absolute;
  z-index: 0;
  height: 1px;
  pointer-events: none;
  background: var(--rer-slot-line);
}
.rer-slot--mark::before { left: calc(-1 * var(--rer-slot-run)); top: 78.27%; width: calc(var(--rer-slot-run) + 23.5%); }
.rer-slot--mark.rer-slot--top::before { top: 10.87%; }
.rer-slot--word::before { left: calc(-1 * var(--rer-slot-run)); top: 0.315em; width: calc(var(--rer-slot-run) + 0.8em); }
.rer-slot > * { position: relative; z-index: 1; }
/* --draw: the line is drawn once on arrival, from the left edge into the
   slot, in CSS alone (no script). Reduced motion: it is simply there. */
.rer-slot--draw::before { transform-origin: 0 50%; animation: rer-slot-draw var(--rer-slow) var(--rer-ease) 120ms both; }
@keyframes rer-slot-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The lean-in (lean.js): the page's one leaning element arrives skewed
   -12 deg, 0.5 cap to the left, with two hairline trails in its slot band,
   and settles upright in 320 ms; at rest, and without script, it never
   leans. Reduced motion: a 120 ms fade, no lean, no trails. */

[data-rer-lean] { position: relative; }
[data-rer-lean]::before, [data-rer-lean]::after {
  content: '';
  position: absolute;
  top: 0.315em;
  height: 1px;
  background: var(--rer-ink);
  opacity: 0;
  pointer-events: none;
  transform-origin: 100% 50%;
}
[data-rer-lean]::before { right: calc(100% + 0.27em); width: 2.1em; }
[data-rer-lean]::after { right: calc(100% + 2.57em); width: 1.5em; }

.rer-lean-armed { opacity: 0; transform: translateX(-0.5em) skewX(var(--rer-lean)); }
.rer-lean-armed::before { opacity: 0.6; }
.rer-lean-armed::after { opacity: 0.35; }
.rer-lean-in {
  transition: transform var(--rer-settle) var(--rer-ease), opacity var(--rer-fast) linear;
}
.rer-lean-in::before, .rer-lean-in::after {
  opacity: 0;
  transform: scaleX(0);
  transition: opacity var(--rer-quick) var(--rer-ease), transform var(--rer-quick) var(--rer-ease);
}

@media (prefers-reduced-motion: reduce) {
  .rer-lean-armed { transform: none; }
  .rer-lean-armed::before, .rer-lean-armed::after { opacity: 0; }
  .rer-lean-in { transition: opacity var(--rer-fast) linear; }
  .rer-lean-in::before, .rer-lean-in::after { transition: none; }
}

/* RER price numerals (price.js sets the outline; the $ is the S with a stub
   above the cap line and below the baseline). The font-size is the cap. */

.rer-price { display: block; margin: 0; font: 700 var(--rer-cap-price)/1 var(--rer-ui); color: var(--rer-ink); }
.rer-price svg { display: block; height: 1.24em; width: auto; margin: -0.12em 0; overflow: visible; fill: currentColor; }

/* Ruled rows: hairlines between rows and under the last, open at the sides.
   A .rer-row lays out a label, its text and an end column; at 640 px and
   narrower they stack. */

.rer-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rer-hairline); }
.rer-rows > * { border-top: 1px solid var(--rer-hairline); }
.rer-row {
  display: grid;
  grid-template-columns: var(--rer-row-label, minmax(8em, 13em)) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px var(--rer-space-label, 32px);
  padding: var(--rer-space-row, 22px) 0;
  color: var(--rer-ink);
}
.rer-row > :last-child { justify-self: end; }

/* A label and its value, with no end column (an answer, a company detail):
   the value is not end-aligned. The label is a human label (Inter Tight 600)
   or, as .rer-row__code, a Plex identifier in the metadata colour. */
.rer-row--pair { grid-template-columns: var(--rer-row-label, minmax(8em, 13em)) minmax(0, 1fr); }
.rer-row--pair > :last-child { justify-self: start; }
.rer-row--pair > :first-child { margin: 0; font: 600 17px/1.4 var(--rer-ui); color: var(--rer-ink); }
.rer-row--pair > .rer-row__code { font: 400 13px/1.6 var(--rer-mono); color: var(--rer-muted); }
.rer-row--pair > dd { margin: 0; }

/* Open columns: one hairline over them and between them, no boxes. A column
   marked .rer-lit-edge takes the 2 px lit edge. One column at 720 px and
   narrower, ruled across. */

.rer-columns {
  --rer-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--rer-cols), minmax(0, 1fr));
  border-top: 1px solid var(--rer-hairline);
  border-bottom: 1px solid var(--rer-hairline);
}
.rer-columns > * { padding: var(--rer-space-inset, 32px) clamp(20px, 2.4vw, 40px) calc(var(--rer-space-inset, 32px) + 8px); }
.rer-columns > * + * { border-left: 1px solid var(--rer-hairline); }

/* The code line: a command in Plex on a 2 px block, a prompt, a cobalt
   cursor (the view's signal; it never blinks) and a copy action
   (copy-line.js) that says what it did. */

.rer-code {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 16px 12px clamp(16px, 2vw, 28px);
  border: 1px solid var(--rer-hairline);
  border-radius: var(--rer-radius);
  background: var(--rer-surface);
}
.rer-code__line { flex: 1; min-width: 0; font: 400 15px/1.6 var(--rer-mono); color: var(--rer-ink); overflow-wrap: anywhere; }
.rer-code__prompt { margin-right: 1ch; color: var(--rer-muted); user-select: none; }
.rer-code__cursor { display: inline-block; width: 0.6em; height: 1.2em; margin-left: 2px; vertical-align: -0.25em; background: var(--rer-signal); }
.rer-code__copy {
  --rer-h: 32px;
  position: relative;
  flex: none;
  padding: 0 12px;
  border-color: var(--rer-line-strong);
  font-size: var(--rer-size-meta);
  color: var(--rer-ink);
  cursor: pointer;
  transition: border-color var(--rer-quick) var(--rer-ease), color var(--rer-quick) var(--rer-ease);
}
.rer-code__copy[hidden] { display: none; }
.rer-code > [role="status"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The action's hit area reaches 48 px. */
.rer-code__copy::before { content: ''; position: absolute; inset: -8px; }
.rer-code__copy:is(:hover, [data-state="hover"]) { border-color: var(--rer-lit); color: var(--rer-lit); }
.rer-code__copy:is(:active, [data-state="active"]) { transform: translateY(1px); }
.rer-code__copy:is(:focus-visible, [data-state="focus"]) { outline: 2px solid var(--rer-lit); outline-offset: 3px; }

/* The contact row: a whole row is the link (label, what it is for, the
   address and an arrow) on the ruled rows; under the pointer or focus the
   label steps 8 px right (the lean, settled) and the arrow follows. */

.rer-contact {
  display: grid;
  grid-template-columns: var(--rer-row-label, minmax(7em, 12em)) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px var(--rer-space-label, 32px);
  min-height: 88px;
  padding: calc(var(--rer-space-row, 22px) - 4px) 0;
  color: var(--rer-ink);
  text-decoration: none;
}
.rer-contact__label { font: 600 18px/1.3 var(--rer-ui); letter-spacing: -0.005em; transition: transform var(--rer-quick) var(--rer-ease); }
.rer-contact__text { max-width: var(--rer-measure); font: 300 16px/var(--rer-leading, 1.5) var(--rer-ui); color: var(--rer-ink); }
.rer-contact__address { display: inline-flex; align-items: center; gap: 16px; font: 400 15px/1.4 var(--rer-mono); }
.rer-contact__address svg { flex: none; width: 18px; height: 12px; color: var(--rer-muted); transition: transform var(--rer-quick) var(--rer-ease), color var(--rer-quick) var(--rer-ease); }
.rer-contact:is(:hover, :focus-visible, [data-state="hover"]) .rer-contact__label { transform: translateX(8px); }
.rer-contact:is(:hover, :focus-visible, [data-state="hover"]) .rer-contact__address svg { transform: translateX(4px); color: var(--rer-ink); }
.rer-contact:is(:focus-visible, [data-state="focus"]) { outline: 2px solid var(--rer-lit); outline-offset: 3px; }

/* The ledger page (decided 2026-10-01): the shared layer of /pricing,
   /projects/, /agents and /contact. One strict label column
   (--ledger-label) runs down every page: section codes, row labels and
   table row headers sit in it. A page is <main id="main" class="rer-page">:
   a header (.rer-head: the one statement, a lead, a body, the action), a
   figure strip, then ruled sections. Never cat-main, whose link rules would
   land on .rer-btn. Links here carry zero specificity so a button keeps its
   own colour. */

.rer-page {
  --ledger-label: clamp(176px, 21vw, 320px);
  --rer-row-label: var(--ledger-label);
  display: block;
  padding: var(--rer-space-top) var(--gutter) var(--rer-space-end);
  color: var(--rer-ink);
  font: 400 var(--rer-size-body)/var(--rer-leading) var(--rer-ui);
  overflow-wrap: break-word;
}
.rer-page *, .rer-page *::before, .rer-page *::after { box-sizing: border-box; }
:where(.rer-page) a:where(:not(.rer-btn)) { color: inherit; }
:where(.rer-page) :where(p, dd, li) > a:where(:not(.rer-btn)) { text-decoration: underline; text-decoration-color: var(--rer-line); text-underline-offset: 0.18em; }
:where(.rer-page) :where(p, dd, li) > a:where(:not(.rer-btn)):hover { text-decoration-color: currentColor; }
:where(.rer-page) :focus-visible { outline: 2px solid var(--rer-lit); outline-offset: 3px; }
:where(.rer-page) code { font-family: var(--rer-mono); font-size: 0.86em; color: inherit; }

/* The header. The statement is the page's name in RER Display, in the
   wordmark forms, on one line at --rer-cap-statement (its font-size is the
   cap). line-height 1 seats the cap line at the top of the box, where the
   slot band is. Its one nod: P, R or D takes the slot line, any other
   letter the lean-in (data-rer-lean). */

.rer-head { max-width: 1100px; }
.rer-statement { margin: 0; font-size: var(--rer-cap-statement); line-height: 1; white-space: nowrap; }
.rer-head .rer-slot { --rer-slot-run: var(--gutter); display: block; width: max-content; font-size: var(--rer-cap-statement); line-height: 1; }
.rer-head .rer-slot .rer-statement { font-size: inherit; }
.rer-slot--draw::before { transform-origin: 0 50%; animation: rer-slot-draw var(--rer-slow) var(--rer-ease) 120ms both; }
@keyframes rer-slot-draw { from { transform: scaleX(0); } }
.rer-head .rer-lead { margin-top: var(--rer-space-inset); max-width: 30em; }
.rer-head .rer-body { margin-top: clamp(14px, 1.3vw, 20px); max-width: var(--rer-measure); color: var(--rer-muted); }
.rer-head .rer-body a { color: var(--rer-ink); }
.rer-head > .rer-code { margin-top: calc(var(--rer-space-inset) + 8px); max-width: 760px; }
.rer-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: calc(var(--rer-space-inset) + 8px); }
.rer-code__caption { margin: 12px 0 0; font: 400 var(--rer-size-label)/1.4 var(--rer-mono); color: var(--rer-muted); }

/* The strip: facts as large figures, ruled above and below and between,
   never boxed. A dt is a Plex label written in lower case in the source
   (no text-transform: some labels are case-sensitive names); a dd is a text
   value or a .rer-figure (RER Display, its text forms). */

.rer-strip { display: grid; grid-template-columns: repeat(var(--cells, 4), minmax(0, 1fr)); margin: var(--rer-space-head) 0 0; border-top: 1px solid var(--rer-hairline); border-bottom: 1px solid var(--rer-hairline); }
.rer-strip > div { display: flex; flex-direction: column; min-width: 0; padding: var(--rer-space-cell) clamp(24px, 2.4vw, 36px) calc(var(--rer-space-cell) + 4px); border-left: 1px solid var(--rer-hairline); }
.rer-strip > div:first-child { padding-left: 0; border-left: 0; }
.rer-strip dt { margin: 0; font: 400 var(--rer-size-label)/1.4 var(--rer-mono); color: var(--rer-muted); }
.rer-strip dd { margin: auto 0 0; padding-top: 16px; font: 500 20px/1.3 var(--rer-ui); color: var(--rer-ink); }
.rer-figure { font-family: 'RER Display', var(--rer-ui); font-weight: 700; font-stretch: 100%; font-synthesis: none; font-kerning: normal; font-size: clamp(32px, 2.8vw, 44px); line-height: 1; font-variant-numeric: tabular-nums; }
.rer-strip dd.rer-figure { font-family: 'RER Display', var(--rer-ui); font-size: clamp(32px, 2.8vw, 44px); font-weight: 700; line-height: 1; color: var(--rer-ink); }
.rer-strip dd .rer-version { margin-left: 6px; font-size: 15px; color: var(--rer-muted); }

/* Sections: ruled, coded in the label column, the content beside it. */

.rer-page > section, .rer-section { margin-top: var(--rer-space-section); padding-top: var(--rer-space-inset); border-top: 1px solid var(--rer-hairline); }
.rer-section-head { display: grid; grid-template-columns: var(--rer-head-label, var(--ledger-label)) minmax(0, 1fr); align-items: baseline; gap: 0 var(--rer-head-gap, var(--rer-space-label)); }
.rer-section-head__code { font: 400 var(--rer-size-meta)/1.4 var(--rer-mono); color: var(--rer-muted); }
.rer-section-head h2 { margin: 0; font: 700 clamp(24px, 2.2vw, 34px)/1.15 var(--rer-ui); letter-spacing: -0.02em; color: var(--rer-ink); }
.rer-section-head p { max-width: var(--rer-measure); margin: 14px 0 0; color: var(--rer-muted); font-size: 17px; }
.rer-section-head p a { color: var(--rer-ink); }
.rer-section-head + * { margin-top: var(--rer-space-inset); }
.rer-page > section > p { margin: var(--rer-space-gap) 0 0; max-width: var(--rer-measure); color: var(--rer-muted); font-size: var(--rer-size-small); }

/* Rows. .rer-row--pair is a label and a value with no end column (an answer
   is not end-aligned). A label is Inter Tight 600 or, for a path, an id or an
   address, Plex; the end column is Plex metadata. */

.rer-row--pair { grid-template-columns: var(--rer-row-label, minmax(8em, 13em)) minmax(0, 1fr); }
.rer-row--pair > :last-child { justify-self: stretch; }
.rer-row > dt, .rer-row > dd, .rer-row > p { margin: 0; }
.rer-row__label { font: 600 17px/1.4 var(--rer-ui); letter-spacing: -0.005em; color: var(--rer-ink); }
.rer-row__path { font: 400 14px/1.5 var(--rer-mono); color: var(--rer-ink); overflow-wrap: anywhere; }
.rer-row__id { font: 400 var(--rer-size-meta)/1.5 var(--rer-mono); color: var(--rer-muted); overflow-wrap: anywhere; }
.rer-row__text { max-width: var(--rer-measure); font: 400 17px/var(--rer-leading) var(--rer-ui); color: var(--rer-ink); }
.rer-row__meta { font: 400 var(--rer-size-label)/1.4 var(--rer-mono); color: var(--rer-muted); }
.rer-lit-edge .rer-row__path, .rer-lit-edge .rer-row__label { color: var(--rer-lit); }

/* A block of code or data: Plex 14, white-space kept, scrolling inside its
   own box (a scroller takes focus), keys muted and values ink, each token its
   own span so no colour change falls inside a glyph. A copy action, no
   cursor. */

.rer-code--block { align-items: flex-start; padding-block: 18px; }
.rer-code--block .rer-code__line { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.rer-code__line { margin: 0; }
.rer-code__copy[hidden] { display: none; }
.rer-code code { font-size: inherit; }
.rer-code__key { color: var(--rer-muted); }
.rer-code__value { color: var(--rer-ink); }

/* A link to another page under a contact row: the row is itself the link,
   so this line sits below it, in the text column. */
.rer-contact__also { margin: calc(8px - var(--rer-space-row)) 0 0; padding: 0 0 var(--rer-space-row) calc(var(--ledger-label, 12em) + var(--rer-space-label)); font: 400 15px/1.5 var(--rer-ui); color: var(--rer-muted); }

@media (prefers-reduced-motion: reduce) {
  .rer-btn, .rer-btn--ghost::before, .rer-contact__label, .rer-contact__address svg { transition-duration: 0ms; }
  .rer-slot--draw::before { animation: none; }
}

@media (max-width: 720px) {
  .rer-columns { grid-template-columns: minmax(0, 1fr); }
  .rer-columns > * + * { border-left: 0; border-top: 1px solid var(--rer-hairline); }
}

@media (max-width: 640px) {
  .rer-row, .rer-row--pair, .rer-contact { grid-template-columns: minmax(0, 1fr); }
  .rer-row > :last-child { justify-self: start; }
  .rer-row--pair > :last-child { justify-self: stretch; }
  .rer-contact__also { padding-left: 0; margin-top: -4px; }
  .rer-contact__address { font-size: 14px; overflow-wrap: anywhere; }
  /* The copy action moves above the command's text, so it never covers a line. */
  .rer-code { flex-direction: column; align-items: stretch; gap: 8px; }
  .rer-code__line { flex: 0 1 auto; }
  .rer-code__copy { order: -1; align-self: flex-end; }
  .rer-code--block .rer-code__line { font-size: 12px; }
  .rer-page { --rer-cap-statement: min(9vw, 40px); }
  .rer-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* not --cells: a page sets that inline */
  .rer-strip > div { padding: var(--rer-space-cell) 12px calc(var(--rer-space-cell) + 2px) 16px; }
  .rer-strip > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rer-strip > div:nth-child(n+3) { border-top: 1px solid var(--rer-hairline); }
  .rer-strip > div:nth-child(3):last-child { grid-column: 1 / -1; padding-left: 0; }
  .rer-section-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* The index (the projects page): the projects as one ruled list, in strict
   columns (code, name with its category and one line, version, requirements,
   status). The first available project is the lit row; every other row is
   dimmed to muted, and brightens to ink (never #fff) under the pointer or
   focus. The five-column row needs about 870 px of list to leave the name
   and its line a readable column, so it starts at 960 px; below that the
   version and requirements move under the line. From 1280 px a pane beside
   the list shows the screenshot of the row under the pointer (preview.js),
   the lit project's by default; below that the lit row shows its own image
   under its text and dimmed rows show none. The section heads after the
   index share its 40 px code column, so every head sits on one edge. */

.rer-index, .rer-index ~ .rer-section { --rer-head-label: 40px; --rer-head-gap: 24px; }
.rer-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 4.4vw, 72px); margin-top: var(--rer-space-section); }
.rer-index .rer-section { margin-top: 0; }
.rer-index .rer-section + .rer-section { margin-top: calc(var(--rer-space-section) * 0.6); }
.rer-index .rer-section:not(:last-child) .rer-index__rows { border-bottom: 0; }
.rer-index__rows { margin: var(--rer-space-inset) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rer-hairline); }
.rer-index__rows > li { position: relative; border-top: 1px solid var(--rer-hairline); }
.rer-index__rows a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 136px 72px 148px;
  align-items: baseline;
  gap: 4px 24px;
  padding: var(--rer-space-row) 0;
  color: var(--rer-muted);
  text-decoration: none;
  transition: color var(--rer-fast) linear;
}
.rer-index__rows a:is(:hover, :focus-visible), .rer-index__rows .rer-lit-edge a { color: var(--rer-ink); }
.rer-index__rows a:focus-visible { outline-offset: 8px; }
.rer-index__rows .rer-lit-edge .rer-index__name { color: var(--rer-lit); }
.rer-index__code, .rer-index__version { font: 400 var(--rer-size-meta)/1.4 var(--rer-mono); }
.rer-index__code { color: var(--rer-muted); }
.rer-index__body { min-width: 0; }
.rer-index__name { font: 600 clamp(20px, 1.6vw, 24px)/1.2 var(--rer-ui); letter-spacing: -0.01em; }
.rer-index__category { display: inline-block; margin-left: 10px; font: 400 var(--rer-size-meta)/1.4 var(--rer-mono); color: var(--rer-muted); }
.rer-index__line { display: block; max-width: var(--rer-measure); margin-top: 8px; font: 300 16px/var(--rer-leading) var(--rer-ui); }
.rer-index__version { white-space: nowrap; }
.rer-index__reqs { justify-self: end; font: 300 24px/1 var(--rer-ui); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* its label is wider than the 72 px column: it overhangs the gap on the left, never the status */
.rer-index__reqs small { display: block; margin-top: 4px; font: 400 var(--rer-size-label)/1.4 var(--rer-mono); color: var(--rer-muted); }
.rer-index__rows .rer-tag { justify-self: end; color: inherit; white-space: nowrap; }
.rer-index__rows .cat-card__shot { display: none; }
.rer-index__rows .rer-lit-edge .cat-card__shot { display: block; grid-column: 2 / -1; margin-top: 24px; }
.rer-index__rows .cat-card__shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border: 1px solid var(--rer-hairline); border-radius: var(--rer-radius); }

.rer-index__preview { display: none; position: sticky; top: 24px; align-self: start; margin: 0; }
.rer-index__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rer-hairline); border-radius: var(--rer-radius); transition: opacity var(--rer-fast) linear; }
.rer-index__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.rer-index__none { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font: 600 24px/1 var(--rer-ui); color: var(--rer-muted); }
.rer-index__frame[data-none] img { visibility: hidden; }
.rer-index__frame[data-none] .rer-index__none { display: flex; }
.rer-index__preview figcaption { margin-top: 10px; font: 400 var(--rer-size-label)/1.4 var(--rer-mono); color: var(--rer-muted); }

@media (min-width: 1280px) {
  .rer-index { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 420px); }
  .rer-index__preview { display: block; }
  .rer-index__rows .rer-lit-edge .cat-card__shot { display: none; }
}

/* 641-959 px: code, the name with its line, and the status on the first
   line; the version and the requirements under the line, in the name's
   column and the status's column. */
@media (max-width: 959px) {
  .rer-index__rows a { grid-template-columns: 40px minmax(0, 1fr) 148px; gap: 8px 24px; }
  .rer-index__code { grid-row: 1; }
  .rer-index__body { grid-column: 2; grid-row: 1; }
  .rer-index__rows .rer-tag { grid-column: 3; grid-row: 1; }
  .rer-index__version { grid-column: 2; grid-row: 2; }
  .rer-index__reqs { grid-column: 3; grid-row: 2; font-size: 15px; }
  .rer-index__reqs small { display: inline; margin-left: 4px; }
  .rer-index__rows .rer-lit-edge .cat-card__shot { grid-column: 2 / -1; grid-row: 3; }
}

@media (max-width: 640px) {
  .rer-index__rows a { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 12px; }
  .rer-index__body { grid-column: 2 / -1; grid-row: 1; }
  .rer-index__version { grid-column: 2; grid-row: 2; }
  .rer-index__reqs { grid-column: 3; grid-row: 2; font-size: 15px; }
  .rer-index__reqs small { display: inline; margin-left: 4px; }
  .rer-index__rows .rer-tag { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
  .rer-index__rows .rer-lit-edge .cat-card__shot { grid-column: 1 / -1; grid-row: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .rer-index__rows a, .rer-index__frame { transition: none; }
}

/* The contact page's clock cell (clock.js): the cobalt capsule, then the
   time in Plex. Hidden until the script runs. */
.rer-clock:not([hidden]) { display: flex; align-items: center; gap: 10px; }
.rer-clock__time { font: 400 20px/1.3 var(--rer-mono); color: var(--rer-ink); font-variant-numeric: tabular-nums; }

/* An identifier in a value (an ABN, an id): Plex. An address is set upright. */
.rer-id { font: 400 15px/1.5 var(--rer-mono); }
.rer-page address { font-style: normal; }

/* The lit contact row's title is the lit element's: #fff, with the 2 px edge. */
.rer-lit-edge > .rer-contact .rer-contact__label { color: var(--rer-lit); }

/* Text only assistive tech reads (a table cell's "None listed"). */
.rer-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Rows of sentences (/pricing): every sentence keeps a 40em measure. A value
   that holds a command is wider, so the command's box can run to 52em, but
   the sentence above it still wraps at 40em. A plain list in a row is ink,
   6 px apart, no bullets. */
.rer-rows--prose > .rer-row--pair > dd { max-width: 40em; }
.rer-rows--prose > .rer-row--pair > dd:has(> .rer-code) { max-width: 52em; }
.rer-rows--prose > .rer-row--pair > dd > p { max-width: 40em; }
.rer-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: 40em; }
.rer-row--pair > dd > p { margin: 0; }
.rer-row--pair > dd > p + .rer-code { margin-top: 20px; } /* a sentence, then its command */

/* A block of commands: one box, a prompt gutter with one $ per command (in
   the markup, so it shows without script), and the cobalt cursor after the
   last. The gutter is 2ch wide, so a command starts where the single code
   line's does. Without script the commands never wrap (the line scrolls
   inside the box) and the marks stack at the line height beside them, one
   per command. code-prompts.js lets the commands wrap (.rer-code--wrapped)
   and moves each $ level with its command's first line; a wrapped command's
   continuation hangs under it where text-indent hanging each-line is
   supported. The copy action copies the commands without their prompts. */
.rer-code--commands { align-items: flex-start; min-height: 0; padding: 16px 16px 16px clamp(16px, 2vw, 28px); }
.rer-code--commands .rer-code__text { white-space: pre; }
.rer-code--commands:not(.rer-code--wrapped) .rer-code__line { overflow-x: auto; overflow-wrap: normal; }
.rer-code--wrapped .rer-code__text { white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 2ch hanging each-line; }
.rer-code__prompts { flex: none; width: 2ch; margin-right: -16px; font: 400 15px/1.6 var(--rer-mono); color: var(--rer-muted); user-select: none; }
.rer-code__prompts > span { display: block; position: relative; }

/* Plans (/pricing): one slab of three plan columns under a label column
   ("who runs it"), then a comparison table on the same columns. Hairlines run
   above and below the slab and between the plans; the lit plan takes the 2 px
   edge. The first track is shortened by one plan padding, so the first plan's
   text starts on the page's label edge. */
.rer-page > .rer-plans { --rer-plan-pad: clamp(20px, 2.4vw, 32px); --rer-plan-top: clamp(32px, 2.8vw, 44px); --rer-plan-cols: calc(var(--ledger-label) + var(--rer-head-gap, var(--rer-space-label)) - var(--rer-plan-pad)) repeat(3, minmax(0, 1fr)); margin-top: calc(var(--rer-space-section) * 0.65); padding-top: 0; border-top: 0; }
/* The plans share the slab's rows (subgrid), so each tier (kicker, price,
   name, description, credit, status, action) sits level across the three
   columns even when one plan's name or kicker wraps. */
.rer-plans__slab { display: grid; grid-template-columns: var(--rer-plan-cols); row-gap: 0; border-top: 1px solid var(--rer-hairline); border-bottom: 1px solid var(--rer-hairline); }
.rer-plans__who { grid-row: span 7; align-self: start; margin: 0; padding-top: var(--rer-plan-top); font: 400 12px/1.4 var(--rer-mono); color: var(--rer-muted); }
.rer-plans .plan { display: grid; grid-row: span 7; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; align-content: start; min-width: 0; padding: var(--rer-plan-top) var(--rer-plan-pad) calc(var(--rer-plan-top) + 8px); }
.rer-plans .plan + .plan { border-left: 1px solid var(--rer-hairline); }
.rer-plans .plan__kicker { margin: 0; font: 400 12px/1.4 var(--rer-mono); color: var(--rer-muted); text-transform: lowercase; }
/* The figure is capped by its column (26cqi: $100 is 3.82 ems wide), so it
   never runs into the column's padding. */
.rer-plans .plan__price { container-type: inline-size; display: grid; align-content: start; gap: 14px; justify-items: start; margin: 32px 0 0; }
.rer-plans .plan__figure { font-size: min(clamp(48px, 4.8vw, 80px), 26cqi); }
.rer-plans .plan__interval { font: 300 15px/1 var(--rer-ui); color: var(--rer-muted); }
.rer-plans .plan__name { margin: 32px 0 10px; font: 700 clamp(22px, 1.8vw, 28px)/1.15 var(--rer-ui); letter-spacing: -0.02em; color: var(--rer-ink); }
.rer-plans .plan.rer-lit-edge .plan__name { color: var(--rer-lit); }
.rer-plans .plan__desc { margin: 0; font-size: 16px; line-height: var(--rer-leading); color: var(--rer-muted); }
.rer-plans .plan__credit { margin: 24px 0 0; font: 500 15px/1.4 var(--rer-ui); color: var(--rer-ink); }
.rer-plans .plan__availability { display: grid; align-content: start; gap: 10px; justify-items: start; margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--rer-muted); }
.rer-plans .plan__cta { align-self: end; margin: 0; padding-top: 40px; }

.rer-plans__table { display: block; width: 100%; margin: 0; border-collapse: collapse; }
.rer-plans__table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.rer-plans__table tbody { display: block; }
.rer-plans__table tr { display: grid; grid-template-columns: var(--rer-plan-cols); border-bottom: 1px solid var(--rer-hairline); }
.rer-plans__table th[scope="row"] { padding: 24px 0; font: 600 15px/1.4 var(--rer-ui); text-align: left; color: var(--rer-ink); }
.rer-plans__table td { min-width: 0; padding: 24px var(--rer-plan-pad); }
@media (min-width: 901px) { .rer-plans__table td + td { padding-left: calc(var(--rer-plan-pad) + 1px); } } /* the plans' own left rule */
.rer-plans__value { display: block; }
.rer-plans__cell-label { display: block; font: 500 15px/1.4 var(--rer-ui); color: var(--rer-ink); }
.rer-plans__cell-text { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--rer-muted); }
.rer-plans__none { color: var(--rer-muted); }
.rer-plans__note { max-width: var(--rer-measure); margin: 32px 0 0; font-size: 15px; color: var(--rer-muted); }
.rer-plans__note + .rer-plans__note { margin-top: 12px; }

/* Three narrow columns: the plans' buttons step down so each stays inside its
   column's padding (measured from 721 to 1280 px). */
@media (min-width: 721px) and (max-width: 1280px) {
  .rer-plans .plan__cta .rer-btn { gap: 8px; padding: 0 14px; font-size: 15px; }
  .rer-plans .plan__cta .rer-btn--ghost { padding: 0; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .rer-page > .rer-plans { --rer-plan-pad: 18px; }
  .rer-plans .plan__cta .rer-btn { gap: 6px; padding: 0 12px; font-size: 14px; }
  .rer-plans .plan__cta .rer-btn--ghost { padding: 0; }
}

@media (max-width: 900px) {
  .rer-plans__slab { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rer-plans__who { grid-row: auto; grid-column: 1 / -1; padding: 18px 0; border-bottom: 1px solid var(--rer-hairline); }
  .rer-plans__who + .plan { padding-left: 0; }
  .rer-plans .plan__figure { font-size: min(48px, 6.25vw); } /* one size in all three, the paid columns being narrower */
  .rer-plans__table tr { display: block; padding: 24px 0; }
  .rer-plans__table th[scope="row"] { display: block; padding: 0 0 8px; font: 400 12px/1.4 var(--rer-mono); color: var(--rer-muted); }
  .rer-plans__table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
  .rer-plans__table td::before { content: attr(data-label); padding-top: 0.2em; font: 400 12px/1.4 var(--rer-mono); color: var(--rer-muted); }
}

@media (max-width: 720px) {
  .rer-plans__slab { grid-template-columns: minmax(0, 1fr); }
  .rer-plans__who { display: none; } /* stacked plans are no longer columns to name */
  .rer-plans .plan { padding: 36px 0 40px; }
  .rer-plans .plan + .plan { border-left: 0; border-top: 1px solid var(--rer-hairline); }
  .rer-plans .plan__figure { font-size: min(56px, 26cqi); }
}

/* Phones: the copy action sits above the commands, and the gutter keeps its
   column beside them, both at 14 px. */
@media (max-width: 640px) {
  .rer-code--commands { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 0; }
  .rer-code--commands .rer-code__copy { grid-column: 1 / -1; grid-row: 1; justify-self: end; }
  .rer-code--commands .rer-code__prompts { grid-column: 1; grid-row: 2; margin-right: 0; font-size: 14px; }
  .rer-code--commands .rer-code__line { grid-column: 2; grid-row: 2; font-size: 14px; }
}

/* Line art (decided 2026-10-02): the RER letters' construction drawn as
   pictures. The drawings are generated SVG (story/src/language/art/,
   npm run build:art) inlined by the page in a .rer-art wrapper
   (art/band.js); art.js plays their motion. One pen (the Regular stem,
   1.75 px, non-scaling), ink on black, faint and 28% echoes, never #fff, at
   most one cobalt square ([data-art-signal], counted by rules.js; a view
   with another signal adds .rer-art--quiet and the square turns ink).
   - .rer-art--opener: one per page, a band between a section's rule and its
     head. Its cap is --rer-art-cap; the drawing's anchor stands on
     --rer-art-lead (the content column from 721 px) and its echoes hang
     into the label column (the section head's: --rer-head-label where a
     page sets it). Narrower than its natural width it scales down
     whole, never cropped. .rer-art--floor runs the floor hairline under it.
   - .rer-art--station: /pricing's three stations, one first in each plan.
     Above 900 px they stand on a hairline 8 px over the slab's rule (never
     on the lit plan's 2 px rule); at 900 px and below each heads its plan.
     All three share --rer-art-unit, so they are one scale.
   - .rer-art--icon: a 64 px marker in a section head's code column, never
     wider than that column (on /projects, where the index sets the column
     to 40 px, it takes the column's width and keeps the head's gutter).
   Motion (art.js): a lean drawing's mover arrives through lean.js (-12 deg,
   half a cap back, two trails, upright in 320 ms); a fade drawing's echoes
   and then its mover fade in, by 320 ms. Played once on scroll-in; at rest
   and without script nothing leans or hides; under reduced motion it is
   static. */

.rer-art { --rer-art-cap: clamp(64px, 9.4vw, 136px); position: relative; display: block; line-height: 0; color: var(--rer-ink); pointer-events: none; }
.rer-art__drawing { position: relative; display: block; overflow: visible; }
.rer-art--opener { --rer-art-lead: 0px; overflow-x: clip; margin: 0 0 clamp(28px, 3vw, 44px); }
.rer-art--opener .rer-art__drawing {
  --rer-art-shift: max(0px, calc(var(--rer-art-lead) - var(--rer-art-cap) * var(--rer-art-anchor)));
  width: min(calc(100% - var(--rer-art-shift)), calc(var(--rer-art-cap) * var(--rer-art-w)));
  height: auto;
  margin-left: var(--rer-art-shift);
}
@media (min-width: 721px) {
  .rer-page .rer-art--opener { --rer-art-lead: calc(var(--rer-head-label, var(--ledger-label)) + var(--rer-head-gap, 32px)); }
}
.rer-art--floor::before, .rer-art--station::before { content: ''; position: absolute; left: 0; right: 0; bottom: -0.5px; height: 1px; background: var(--rer-hairline); }
.rer-art--quiet [data-art-signal] { fill: var(--rer-ink); }
.rer-art--icon { display: inline-block; width: 64px; height: 64px; }
.rer-art--icon .rer-art__drawing { width: 100%; height: 100%; }
/* The head's code column when it carries an icon: the code, then the marker under it. */
.rer-section-head__rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
.rer-section-head__rail .rer-art--icon { width: min(64px, 100%); height: auto; aspect-ratio: 1; }

/* The plan stations. --rer-art-unit is one cap for all three: the widest
   station in its column (2.98 caps hung, 3.9 whole; the generator writes the
   same as --rer-art-span and --rer-art-span-flat) across a plan's text. */
.rer-plans:has(.rer-art--station) { container-type: inline-size; }
.rer-plans__slab:has(.rer-art--station) { --rer-art-cap: clamp(64px, 9.4vw, 136px); --rer-art-unit: min(var(--rer-art-cap), calc((100cqi / 3 - 2 * var(--rer-plan-pad)) / 3.9)); }
.rer-art--station .rer-art__drawing { width: calc(var(--rer-art-unit) * var(--rer-art-w)); height: auto; }
.rer-art--station { margin-bottom: 20px; }
.rer-plans .plan:has(> .rer-art--station) { grid-row: span 8; }
@media (min-width: 901px) {
  .rer-plans__slab:has(.rer-art--station) {
    --rer-art-unit: min(var(--rer-art-cap), calc(((100cqi - var(--ledger-label) - var(--rer-head-gap, 32px) + var(--rer-plan-pad)) / 3 - 2 * var(--rer-plan-pad)) / 2.98));
    margin-top: calc(var(--rer-art-unit) * 1.23 + 8px);
  }
  .rer-plans .plan:has(> .rer-art--station) { position: relative; grid-row: span 7; }
  .rer-art--station { position: absolute; left: var(--rer-plan-pad); right: var(--rer-plan-pad); bottom: calc(100% + 8px); margin: 0; }
  .rer-art--station::before { left: calc(-1 * var(--rer-plan-pad)); right: calc(-1 * var(--rer-plan-pad)); }
  .rer-art--station .rer-art__drawing { margin-left: calc(-1 * var(--rer-art-unit) * var(--rer-art-anchor)); }
}
@media (max-width: 720px) {
  .rer-plans__slab:has(.rer-art--station) { --rer-art-unit: min(var(--rer-art-cap), calc(100cqi / 3.9)); }
}

/* Motion. Lengths in a drawing's transform are its own units: caps. */
.rer-art [data-art-mover] { transform-box: fill-box; transform-origin: 0 100%; }
.rer-art .rer-lean-armed { transform: translateX(-0.5px) skewX(var(--rer-lean)); }
.rer-art .rer-lean-armed [data-art-trail="1"] { opacity: 0.6; }
.rer-art .rer-lean-armed [data-art-trail="2"] { opacity: 0.35; }
.rer-art .rer-lean-in [data-art-trail] { opacity: 0; transition: opacity var(--rer-quick) var(--rer-ease); }
.rer-art--armed :is([data-art-echo], [data-art-mover]) { opacity: 0; }
.rer-art--in :is([data-art-echo], [data-art-mover]) { transition: opacity var(--rer-fast) linear; }
.rer-art--in [data-art-echo="1"] { transition-delay: 100ms; }
.rer-art--in [data-art-mover] { transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .rer-art :is([data-art-echo], [data-art-mover], [data-art-trail]) { transition: none; }
  .rer-art .rer-lean-armed, .rer-art--armed :is([data-art-echo], [data-art-mover]) { opacity: 1; transform: none; }
  .rer-art .rer-lean-armed [data-art-trail] { opacity: 0; }
}