/*
  enderpearl.ai · shared styles (Useful Work identity)
  Colours: only var(--ep-*) from tokens.css. Surfaces are square; 2 px radius on chips and
  inputs only. Space on a 4 px scale. Page-only CSS goes in css/pages/<page>.css.
  Contents: fonts · scale tokens · base · type · layout · header · footer · components
  (buttons, links, chips, node states, tables, key-value, data and copy, callouts, plates,
  section heads, figures, tile, status strip, checks, timeline, quorum, closing band) ·
  motion · print
*/

/* ---------- fonts: self-hosted variable woff2, latin ----------
   The files are served immutable for a year (_headers, vercel.json). When a font file changes,
   give it a new version in its name (…v2.woff2) here and in partials/head.html. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-var.v1.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: "Martian Mono";
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("/assets/fonts/martian-mono-latin-var.v1.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;
}

/* ---------- scale tokens (not colour; colour is in tokens.css) ---------- */
:root {
  --ep-font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ep-font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ep-width-display: 125%;
  --ep-width-heading: 112%;
  --ep-width-text: 100%;
  --ep-width-label: 75%;
  --ep-width-data: 87.5%;
  --ep-space-1: 4px; --ep-space-2: 8px; --ep-space-3: 12px; --ep-space-4: 16px;
  --ep-space-5: 24px; --ep-space-6: 32px; --ep-space-7: 48px; --ep-space-8: 72px; --ep-space-9: 112px;
  --ep-radius-0: 0; --ep-radius-1: 2px;
  --ep-max: 1280px;
  --ep-gutter: clamp(16px, 4vw, 56px);
  --ep-col-gap: clamp(16px, 2vw, 24px);
  --ep-section: clamp(72px, 9vw, 128px);
  --ep-header-h: 72px;
}
@media (max-width: 620px) { :root { --ep-header-h: 60px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--ep-space-5); }
body {
  margin: 0;
  background: var(--ep-ground);
  color: var(--ep-text);
  font-family: var(--ep-font-sans);
  font-stretch: 100%;
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}
/* surfaces pinned to one colourway (tokens.css): the four by name, or the palette's dark or light */
.ep-carbon, .ep-datasheet, .ep-fathom, .ep-bond, .ep-dark, .ep-light { background: var(--ep-ground); color: var(--ep-text); }
/* content for one palette only (the About brand files, drawn in that palette's inks): shown while
   that palette is in effect */
:root[data-palette="deep"] .pal-useful, :root:not([data-palette="deep"]) .pal-deep { display: none !important; }
::selection { background: var(--ep-selection); color: var(--ep-on-selection); }
/* Deep: scrollbars in the palette's own control edge, not the browser's neutral grey (the page's on
   the ground; inner scrollers, read per element so a pinned sheet keeps its own, on their surface).
   Useful Work keeps the browser's, whose greys are its own. */
:root[data-palette="deep"] { scrollbar-color: var(--ep-control-line) var(--ep-ground); }
:root[data-palette="deep"] body * { scrollbar-color: var(--ep-control-line) transparent; }
/* the halo lines the gap inside the outline: Glint wash on Bond, transparent elsewhere */
:focus-visible { outline: 2px solid var(--ep-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ep-focus-halo); }
main:focus { outline: none; box-shadow: none; }
img, svg, canvas, video { max-width: 100%; }
img, canvas { display: block; }
p, ul, ol, dl, figure, blockquote, pre { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { max-width: 65ch; text-wrap: pretty; }
ul[class], ol[class] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
code, kbd, samp, pre, .mono, .num {
  font-family: var(--ep-font-mono);
  font-stretch: var(--ep-width-data);
  font-variant-numeric: tabular-nums;
  font-size: .86em;
}
table { color: inherit; font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--ep-rule); margin: 0; }
[hidden] { display: none !important; }
/* without JavaScript, controls that need it are not shown */
.no-js .cw, .no-js .copy, .no-js .js-only { display: none !important; }

a {
  color: var(--ep-link);
  text-decoration-line: underline;
  text-decoration-color: var(--ep-link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
}
a:hover { text-decoration-color: var(--ep-link-line-hover); text-decoration-thickness: 2px; }

.vh, .sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.nw { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the pearl in every inline mark (sprite ids mk, mk-a, mk-16): the mark's ink in Useful Work,
   sea glass in Deep */
.mk-pearl { fill: var(--ep-mark-pearl); }

.skip-link {
  position: absolute; left: var(--ep-space-4); top: var(--ep-space-2); z-index: 100;
  padding: 10px 14px; background: var(--ep-inverse); color: var(--ep-on-inverse);
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---------- type roles ---------- */
.d1 {
  font-stretch: var(--ep-width-display); font-weight: 380;
  font-size: clamp(44px, 6.4vw, 88px); line-height: .96; letter-spacing: -.012em;
}
.statement {
  font-stretch: var(--ep-width-display); font-weight: 420;
  font-size: clamp(32px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -.012em;
  max-width: 20ch;
}
/* the h1 of an interior page (Guardian, Status, Mining, About, 404): one size everywhere */
.statement-page {
  font-stretch: var(--ep-width-display); font-weight: 400;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -.012em;
  max-width: none; padding-top: clamp(32px, 4.4vw, 72px);
}
@media (max-width: 620px) { .statement-page { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.04; } }
h2, .d2 {
  font-stretch: var(--ep-width-display); font-weight: 560;
  font-size: clamp(30px, 3.7vw, 44px); line-height: 1.04; letter-spacing: -.01em;
}
h3, .h3 {
  font-stretch: var(--ep-width-heading); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.25; letter-spacing: -.003em;
}
.lead { font-size: clamp(18px, 1.55vw, 20px); line-height: 1.5; max-width: 60ch; }
.small { font-size: 14px; line-height: 1.5; }
.muted { color: var(--ep-text-2); }
.faint { color: var(--ep-text-3); }
.lbl {
  font-family: var(--ep-font-sans); font-stretch: var(--ep-width-label); font-weight: 650;
  font-size: 11.5px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ep-text-3);
}
.data {
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data);
  font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums;
}
.path { font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; color: var(--ep-text-3); }
.bigfig {
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-weight: 300;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.bigfig small { font-size: .42em; font-weight: 400; letter-spacing: 0; color: var(--ep-text-2); margin-left: 6px; }
.prose { display: grid; gap: var(--ep-space-4); }
.prose > * { max-width: 65ch; }
.hex { font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-all; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--ep-max) + 2 * var(--ep-gutter)); margin-inline: auto; padding-inline: var(--ep-gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-6); }
.grid > * { min-width: 0; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-10 { grid-column: span 10; }
.span-12 { grid-column: 1 / -1; }
.start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
.cols-2, .cols-3, .cols-4 { display: grid; gap: var(--ep-col-gap); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; gap: var(--ep-space-4); align-content: start; min-width: 0; }
.stack-lg { display: grid; gap: var(--ep-space-6); align-content: start; min-width: 0; }
.stack-sm { display: grid; gap: var(--ep-space-2); align-content: start; min-width: 0; }
.scroll-x { overflow-x: auto; min-width: 0; }
@media (max-width: 900px) {
  .grid > [class*="span-"] { grid-column: 1 / -1; }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
}

.section { padding-top: var(--ep-section); }
main > :last-child { padding-bottom: var(--ep-section); }
.section-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-4);
  border-top: 1px solid var(--ep-rule-strong); padding-top: var(--ep-space-4); margin-bottom: var(--ep-space-7);
  align-items: start;
}
.section-title { grid-column: span 5; display: grid; gap: var(--ep-space-3); align-content: start; }
.section-lead { grid-column: 7 / -1; display: grid; gap: var(--ep-space-4); }
.section-title .path a { color: inherit; }
@media (max-width: 900px) {
  .section-title, .section-lead { grid-column: 1 / -1; }
  .section-head { margin-bottom: var(--ep-space-6); }
}

/* ---------- header ---------- */
.notice { background: var(--ep-panel); border-bottom: 1px solid var(--ep-rule); }
.notice-in { padding-block: 7px; }
.notice-text { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ep-space-4); font-size: 13px; line-height: 1.45; }
.notice-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-stretch: var(--ep-width-label); font-weight: 650; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ep-text);
}
.notice-sub { color: var(--ep-text-2); }
@media (max-width: 620px) { .notice-sub { display: none; } }

.site-header { border-bottom: 1px solid var(--ep-rule); }
.header-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ep-space-3) var(--ep-space-6); min-height: var(--ep-header-h); padding-block: var(--ep-space-3); }
.brand { display: inline-flex; align-items: center; color: var(--ep-mark); text-decoration: none; flex: none; }
.brand .lockup { display: block; height: 24px; width: auto; aspect-ratio: 205.01 / 30; fill: currentColor; }
/* .site-menu holds the Main nav and the colourway picker (a setting, so outside the nav landmark);
   on narrow screens the two fold behind "Menu" together */
.site-menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ep-space-4) var(--ep-space-6); }
.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ep-space-2) var(--ep-space-5); }
.nav-list a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  font-stretch: var(--ep-width-label); font-weight: 650; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ep-text-2); text-decoration: none;
}
.nav-list a:hover { color: var(--ep-text); }
.nav-list a::before { content: ""; width: 7px; height: 7px; flex: none; border: 1.5px solid transparent; }
.nav-list a[aria-current="page"] { color: var(--ep-text); }
.nav-list a[aria-current="page"]::before { background: currentColor; border-color: currentColor; }

/* ---------- colourway picker: a button naming the colourway, a panel of five choices ---------- */
.cw { position: relative; flex: none; }
.cw-button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px 0 10px; cursor: pointer;
  font-family: var(--ep-font-sans); font-stretch: var(--ep-width-label); font-weight: 650; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ep-text); background: transparent; border: 1px solid var(--ep-control-line);
}
.cw-button:hover, .cw-button[aria-expanded="true"] { border-color: var(--ep-text); }
.cw-chev { width: 16px; height: 16px; color: var(--ep-text-2); transition: transform .15s; }
.cw-button[aria-expanded="true"] .cw-chev { transform: rotate(180deg); }
/* the button names the colourway in effect, from <html>'s attributes and the system setting, so it
   is right from the first paint. The four names share one grid cell, so the button keeps the width
   of the longest and the nav beside it never moves when the colourway changes. */
.cw-names { display: inline-grid; justify-items: start; }
.cw-name { grid-area: 1 / 1; visibility: hidden; }
:root:not([data-palette="deep"])[data-theme="dark"] .cw-name-carbon,
:root:not([data-palette="deep"])[data-theme="light"] .cw-name-datasheet,
:root[data-palette="deep"][data-theme="dark"] .cw-name-fathom,
:root[data-palette="deep"][data-theme="light"] .cw-name-bond { visibility: visible; }
@media not all and (prefers-color-scheme: light) {
  :root:not([data-palette="deep"]):not([data-theme]) .cw-name-carbon,
  :root[data-palette="deep"]:not([data-theme]) .cw-name-fathom { visibility: visible; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-palette="deep"]):not([data-theme]) .cw-name-datasheet,
  :root[data-palette="deep"]:not([data-theme]) .cw-name-bond { visibility: visible; }
}
/* a swatch: ground, accent, ink, as three cells in a hairline frame; the accent sits beside the ground,
   where it shows in every colourway (Bond's pearl beside its ink is 2.1:1). In the button it shows the
   page's own colourway; in the panel each is pinned to its colourway (.ep-carbon …). The frame and
   the hairlines between the cells are the page's text-3 whatever the pin (--cw-edge is resolved
   on the button or option, outside the pin), so a ground cell never melts into a ground like it
   and two dark cells never run together (4.8 to 5.9:1 on the page and the panel). */
.cw-button, .cw-opt { --cw-edge: var(--ep-text-3); }
.cw-sw {
  display: inline-grid; grid-template-columns: repeat(3, 8px); grid-template-rows: 8px; gap: 1px; flex: none;
  background: var(--cw-edge, var(--ep-text-3)); border: 1px solid var(--cw-edge, var(--ep-text-3));
}
.cw-g { background: var(--ep-ground); }
.cw-i { background: var(--ep-text); }
.cw-a { background: var(--ep-swatch-accent); }

.cw-panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 304px;
  background: var(--ep-panel); color: var(--ep-text); border: 1px solid var(--ep-rule-strong);
}
.cw-title { max-width: none; padding: 12px 14px 10px; border-bottom: 1px solid var(--ep-rule); }
.cw-options { display: grid; padding-block: 4px; }
.cw-opt {
  display: grid; grid-template-columns: 10px auto minmax(0, 1fr); align-items: center; column-gap: 12px;
  width: 100%; min-height: 52px; padding: 8px 14px; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--ep-text); text-align: left; cursor: pointer;
  font-family: var(--ep-font-sans); font-stretch: var(--ep-width-text);
}
.cw-opt:hover { background: var(--ep-tint); }
.cw-opt:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 5px var(--ep-focus-halo); }
.cw-opt-system { border-bottom: 1px solid var(--ep-rule); margin-bottom: 4px; }
.cw-radio { width: 10px; height: 10px; border: 1.5px solid var(--ep-text-2); }
.cw-opt[aria-checked="true"] .cw-radio { background: var(--ep-text); border-color: var(--ep-text); }
.cw-opt .cw-sw { grid-template-columns: repeat(3, 12px); grid-template-rows: 12px; }
.cw-opt .cw-sw-split { grid-template-columns: 18px 19px; } /* as wide as the three-cell swatches */
.cw-opt-t { display: grid; gap: 1px; min-width: 0; }
.cw-opt-name { font-weight: 560; font-size: 15px; line-height: 1.3; }
.cw-opt-note { font-size: 12.5px; line-height: 1.4; color: var(--ep-text-2); text-wrap: pretty; }

.menu-button {
  font-family: var(--ep-font-sans); font-stretch: var(--ep-width-label); font-weight: 650; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background: transparent; color: var(--ep-text); border: 1px solid var(--ep-control-line); padding: 8px 14px; min-height: 40px; cursor: pointer;
}
.menu-button[aria-expanded="true"] { background: var(--ep-inverse); color: var(--ep-on-inverse); border-color: var(--ep-inverse); }

/* Narrow screens: with JS the nav and picker fold behind "Menu"; without JS the nav wraps under the lockup. */
@media (max-width: 880px) {
  .site-menu { flex-basis: 100%; justify-content: space-between; }
  .js .menu-button { display: inline-flex; align-items: center; }
  .js .site-menu { display: none; }
  .js .site-header[data-menu="open"] .site-menu {
    display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: var(--ep-space-5); padding-block: var(--ep-space-2) var(--ep-space-5);
  }
  .js .site-header[data-menu="open"] .nav-list { display: grid; gap: 0; border-top: 1px solid var(--ep-rule); }
  .js .site-header[data-menu="open"] .nav-list a {
    display: flex; min-height: 52px; border-bottom: 1px solid var(--ep-rule);
    font-stretch: var(--ep-width-heading); font-weight: 560; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--ep-text);
  }
  /* in the open menu the picker is a full-width row and its panel opens in place */
  .js .site-header[data-menu="open"] .cw-button { width: 100%; min-height: 48px; padding: 0 12px; font-size: 12px; }
  .js .site-header[data-menu="open"] .cw-chev { margin-left: auto; }
  .cw-panel { position: static; width: auto; margin-top: 8px; }
}
@media (min-width: 881px) { .menu-button { display: none !important; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--ep-rule-strong); padding-block: var(--ep-space-7) var(--ep-space-6); font-size: 14px; line-height: 1.55; }
.footer-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ep-space-4) var(--ep-space-7); padding-bottom: var(--ep-space-6); }
.footer-head .lockup { height: 28px; }
.footer-operated { color: var(--ep-text-2); max-width: 52ch; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-6); border-top: 1px solid var(--ep-rule); padding-top: var(--ep-space-5); }
.footer-col { display: grid; gap: var(--ep-space-3); align-content: start; min-width: 0; }
.footer-facts { grid-column: span 5; gap: var(--ep-space-5); }
.footer-fact { display: grid; gap: var(--ep-space-2); }
.footer-fact p:not(.lbl) { color: var(--ep-text-2); max-width: 46ch; }
.site-footer nav.footer-col { grid-column: 7 / span 2; }
.site-footer .footer-col:last-child { grid-column: 9 / -1; }
.footer-links { display: grid; gap: 2px; }
.footer-links a { display: inline-block; padding-block: 3px; color: var(--ep-text-2); text-decoration: none; }
.footer-links a:hover { color: var(--ep-text); text-decoration: underline; }
.footer-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.footer-dl dt { color: var(--ep-text-3); font-size: 12.5px; padding-top: var(--ep-space-3); }
.footer-dl dt:first-child { padding-top: 0; }
.footer-dl dd { margin: 0; overflow-wrap: anywhere; }
.footer-dl a { color: var(--ep-text-2); }
.footer-dl a:hover { color: var(--ep-text); }
.fp-link { text-decoration: none; }
.fp-link .mono { font-size: 13px; color: var(--ep-text); border: 1px dashed var(--ep-rule-strong); padding: 2px 6px; }
.fp-link-note { text-decoration: underline; text-decoration-color: var(--ep-link-line); text-underline-offset: .24em; }
.fp-link:hover .fp-link-note { text-decoration-color: var(--ep-link-line-hover); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ep-space-2) var(--ep-space-6); margin-top: var(--ep-space-7); padding-top: var(--ep-space-4); border-top: 1px solid var(--ep-rule); color: var(--ep-text-3); font-size: 13px; }
.footer-base .mono { font-size: 12px; }
@media (max-width: 900px) {
  .footer-facts, .site-footer nav.footer-col, .site-footer .footer-col:last-child { grid-column: 1 / -1; }
  .site-footer nav.footer-col .footer-links { grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: var(--ep-space-6); }
}

/* ---------- buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--ep-space-3); align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px;
  font-family: var(--ep-font-sans); font-stretch: var(--ep-width-text); font-weight: 560; font-size: 15.5px; line-height: 1.2;
  background: var(--ep-inverse); color: var(--ep-on-inverse); border: 1px solid var(--ep-inverse);
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: transparent; color: var(--ep-text); }
.btn .ic { width: 18px; height: 18px; flex: none; transition: transform .15s; }
.btn:hover .ic { transform: translateX(2px); }
/* outline controls take --ep-control-line: 3:1 or more in every colourway */
.btn-quiet { background: transparent; color: var(--ep-text); border-color: var(--ep-control-line); }
.btn-quiet:hover { border-color: var(--ep-text); }
.link-arrow {
  display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 560; font-size: 15.5px; line-height: 1.6;
  text-decoration: none; color: var(--ep-text);
}
.link-arrow span { text-decoration: underline; text-decoration-color: var(--ep-link-line); text-underline-offset: .24em; text-decoration-thickness: 1px; }
.link-arrow:hover span { text-decoration-color: var(--ep-link-line-hover); text-decoration-thickness: 2px; }
.link-arrow .ic { width: 18px; height: 18px; flex: none; transition: transform .15s; margin-top: 3px; margin-top: calc((1lh - 18px) / 2); }
.link-arrow:hover .ic { transform: translateX(2px); }
.ic { display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: middle; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 40px; height: 40px; }
a[href^="http"] .ic-out { width: 14px; height: 14px; margin-left: 3px; vertical-align: -1px; }

/* ---------- chips (the kit's tags) ---------- */
/* the kit gives a tag the same edge as an outline control, so a chip takes the control edge (3:1 or more) */
.chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ep-text-2); border: 1px solid var(--ep-control-line); padding: 3px 8px; border-radius: var(--ep-radius-1);
}
.chip::before { content: ""; width: 7px; height: 7px; flex: none; border: 1px dotted currentColor; }
.chip-plain::before { display: none; }
.chip-strong { color: var(--ep-text); border-color: var(--ep-text); }

/* ---------- node states: glyph first, colour second ---------- */
/* --st colours the glyph, --st-ink the word. The word follows the glyph, except a synced state's
   word, which takes --ep-synced-ink (Intaglio on Bond, where Sage marks the glyph only). A rule
   that greys a state sets both. */
.st {
  --st: var(--ep-synced);
  --st-ink: var(--st);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--st-ink);
}
.st::before { content: ""; width: 10px; height: 10px; flex: none; border: 1.5px solid var(--st); background: var(--st); }
.st.ok { --st: var(--ep-synced); --st-ink: var(--ep-synced-ink); }
.st.sign { --st: var(--ep-signing); }
.st.sign::before { background: linear-gradient(90deg, var(--st) 50%, transparent 50%); }
.st.bad { --st: var(--ep-refused); }
.st.bad::before { background: linear-gradient(135deg, transparent 42%, var(--st) 42% 58%, transparent 58%); }
.st.off { --st: var(--ep-offline); }
.st.off::before { background: transparent; }
.st.wait { --st: var(--ep-text-3); }
.st.wait::before { background: transparent; border-style: dotted; }
.st.plain { text-transform: none; letter-spacing: 0; font-size: 13px; white-space: normal; }
.glyph { display: inline-block; width: 9px; height: 9px; flex: none; background: currentColor; border: 1.5px solid currentColor; vertical-align: baseline; }
.glyph-hollow { background: transparent; }
.glyph-half { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.glyph-struck { background: linear-gradient(135deg, transparent 42%, currentColor 42% 58%, transparent 58%); }

/* ---------- live: a flat dot before a label that reads our guardian live (Deep only) ----------
   Deep's Glint marks what is live: Glint in a dark Glint-wash halo on Fathom, Sea Glass Deep in a
   Glint-wash halo on Bond (--ep-live, --ep-live-halo). The Useful Work kit has no live dot, so
   Carbon and Datasheet draw nothing and their labels stay exactly where they were. The dot fills
   once our guardian has answered this page (body[data-gstate], set by guardian.js on every
   reading); while loading, when it cannot be read and without JavaScript it is a hollow ring.
   Never animated. On a chip it takes the place of the chip's own glyph, in the same 7 px box. */
:root[data-palette="deep"] .live::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 0 3px; border-radius: 50%;
  vertical-align: .05em; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ep-text-3);
}
:root[data-palette="deep"] .chip.live::before { margin: 0; border: 0; }
:root[data-palette="deep"] [data-gstate="live"] .live::before,
:root[data-palette="deep"] [data-gstate="paused"] .live::before { background: var(--ep-live); box-shadow: 0 0 0 3px var(--ep-live-halo); }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table caption { caption-side: top; text-align: left; padding-bottom: var(--ep-space-3); }
.table th, .table td { text-align: left; vertical-align: top; padding: 11px 16px 11px 0; border-top: 1px solid var(--ep-rule); }
.table thead th { border-top: 0; padding-top: 0; font-family: var(--ep-font-sans); font-stretch: var(--ep-width-label); font-weight: 650; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ep-text-3); white-space: nowrap; }
.table tbody th { font-weight: 500; }
.table td { font-size: 15px; line-height: 1.45; }
.table .num, .table .r { text-align: right; }
.table td.data, .table td .data, .table td.mono { font-size: 12.5px; }
.table-log td { font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 12.5px; white-space: nowrap; }
.table-log td.note { font-family: var(--ep-font-sans); font-stretch: var(--ep-width-text); font-size: 14px; white-space: normal; min-width: 220px; }
.table-scroll { overflow-x: auto; min-width: 0; }
.table-scroll:focus-visible { outline-offset: 2px; }

/* ---------- key-value lists ---------- */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--ep-space-5); }
.kv dt, .kv dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--ep-rule); }
.kv dt { padding-top: 13px; }
.kv dd { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.kv-wide { grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); }
@media (max-width: 620px) {
  .kv, .kv-wide { grid-template-columns: minmax(0, 1fr); }
  .kv dd { border-top: 0; padding-top: 2px; }
}
.spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--ep-space-5); border-bottom: 1px solid var(--ep-rule); }
.spec dt, .spec dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--ep-rule); }
.spec dt { padding-top: 14px; }
.spec dd { font-size: 15px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }

/* ---------- data blocks and copy ---------- */
.datum { display: grid; gap: var(--ep-space-2); min-width: 0; }
.datum-row { display: flex; align-items: flex-start; gap: var(--ep-space-3); min-width: 0; }
.datum-value {
  flex: 1; min-width: 0; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 13px; line-height: 1.6;
  overflow-wrap: anywhere; word-break: break-all; color: var(--ep-text);
  border: 1px dashed var(--ep-rule-strong); padding: 6px 10px; background: var(--ep-ground);
}
.copy {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  font-family: var(--ep-font-sans); font-stretch: var(--ep-width-label); font-weight: 650; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ep-text-2); background: transparent; border: 1px solid var(--ep-control-line); border-radius: var(--ep-radius-1);
  padding: 0 10px; min-height: 36px;
}
.copy:hover { color: var(--ep-text); border-color: var(--ep-text); }
.copy .ic { width: 16px; height: 16px; }
.copy .ic-done { display: none; }
.copy[data-copied] { color: var(--ep-text); border-color: var(--ep-text); }
.copy[data-copied] .ic-idle { display: none; }
.copy[data-copied] .ic-done { display: inline-block; }
.cmd {
  display: flex; align-items: center; gap: var(--ep-space-3); min-width: 0;
  background: var(--ep-ground); border: 1px solid var(--ep-rule); padding: 6px 6px 6px 12px;
}
.cmd code { flex: 1; min-width: 0; font-size: 12.5px; overflow-wrap: break-word; color: var(--ep-text); }
.cmd code::before { content: "$ "; color: var(--ep-text-3); }
/* site.js cuts a URL into segments (after "//", before each "/"): a segment moves to the next
   line whole, and breaks inside only when it alone is wider than the line. */
.cmd-seg { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .cmd { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; padding: 10px 8px 8px 12px; }
  .cmd code { flex-basis: 100%; }
}
pre.log {
  padding: 16px 18px; background: var(--ep-ground); border: 1px solid var(--ep-rule);
  font-size: 12.5px; line-height: 1.75; color: var(--ep-text-2); overflow-x: auto; white-space: pre;
}

/* ---------- callouts, plates, notes ---------- */
.plate { background: var(--ep-panel); border: 1px solid var(--ep-rule); padding: clamp(16px, 2vw, 24px); display: grid; gap: var(--ep-space-4); align-content: start; min-width: 0; }
.plate-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ep-space-2) var(--ep-space-4); }
.callout { display: grid; gap: var(--ep-space-3); border: 1px solid var(--ep-rule-strong); background: var(--ep-panel); padding: clamp(18px, 2.4vw, 28px); min-width: 0; }
.callout p { font-size: 16.5px; line-height: 1.6; }
.note-line { border-left: 2px solid var(--ep-text); padding-left: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ep-text); }
ul.rules { display: grid; gap: var(--ep-space-2); }
ul.rules li { padding-left: 18px; position: relative; max-width: 62ch; }
ul.rules li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--ep-text-3); }

/* ---------- the tile (C = A·B) ---------- */
.tile-figure { display: grid; gap: var(--ep-space-3); min-width: 0; }
canvas[data-tile] { width: 100%; height: auto; }
canvas[data-tile="product"] { aspect-ratio: 1 / 1; }
.readout { display: grid; gap: 4px; border-top: 1px solid var(--ep-rule); padding-top: var(--ep-space-3); min-height: 6.4em; }
/* the live equation sits on the tile's path wash (Shallows on Bond, as the Deep kit draws it;
   transparent in the others, where nothing moves: the padding is taken back by the margin) */
.readout .ro-eq { font-size: 13px; color: var(--ep-text); justify-self: start; padding-inline: 6px; margin-left: -6px; background: var(--ep-tile-path); }
.readout .ro-terms { font-size: 12px; color: var(--ep-text-2); overflow-wrap: anywhere; }
.readout .ro-meta { font-size: 11.5px; color: var(--ep-text-3); }

/* ---------- live status strip (matrix row) ---------- */
.strip { display: grid; gap: var(--ep-space-3); }
.strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ep-space-2) var(--ep-space-5); }
.strip-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ep-space-2) var(--ep-space-4); }
.strip-title .lbl { color: var(--ep-text); }
.strip-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ep-rule); border: 1px solid var(--ep-rule); }
.strip-cell { background: var(--ep-panel); padding: var(--ep-space-4) clamp(14px, 1.6vw, 22px) var(--ep-space-4); display: grid; gap: 10px; align-content: start; min-width: 0; min-height: 132px; }
.strip-value { min-height: 34px; display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.strip-value .st { font-size: 13px; }
.strip-sub { font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; line-height: 1.5; color: var(--ep-text-2); overflow-wrap: anywhere; }
.strip-cell[aria-busy="true"] .bigfig { color: var(--ep-text-3); }
.strip-message { display: grid; gap: var(--ep-space-3); border: 1px solid var(--ep-rule); border-top: 0; background: var(--ep-ground); padding: var(--ep-space-4) clamp(14px, 1.6vw, 22px); margin-top: calc(-1 * var(--ep-space-3)); }
.strip-message p { font-size: 14.5px; line-height: 1.55; color: var(--ep-text-2); max-width: 78ch; }
.strip-message .cmd { max-width: 560px; }
@media (max-width: 760px) {
  .strip-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-cell { min-height: 116px; }
}

/* ---------- checks (how the guardian decides) ---------- */
.checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ep-rule-strong); }
.check { display: grid; grid-template-rows: auto auto 1fr; gap: var(--ep-space-3); padding: var(--ep-space-5) var(--ep-space-5) var(--ep-space-5) 0; min-width: 0; }
.check + .check { border-left: 1px solid var(--ep-rule); padding-left: var(--ep-space-5); }
.check-no { display: flex; align-items: center; justify-content: space-between; gap: var(--ep-space-2); }
.check p { font-size: 15px; line-height: 1.55; color: var(--ep-text-2); }
@media (max-width: 1000px) {
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check:nth-child(3) { border-left: 0; padding-left: 0; }
  .check:nth-child(n+3) { border-top: 1px solid var(--ep-rule); }
}
@media (max-width: 620px) {
  .checks { grid-template-columns: minmax(0, 1fr); }
  .check { padding-right: 0; }
  .check + .check { border-left: 0; padding-left: 0; border-top: 1px solid var(--ep-rule); }
}

/* ---------- timeline ---------- */
.timeline { display: grid; }
.tl-item { display: grid; grid-template-columns: minmax(8.5rem, 11rem) 28px minmax(0, 1fr); column-gap: var(--ep-space-4); }
.tl-date { padding: 22px 0; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 12.5px; line-height: 1.5; color: var(--ep-text-2); border-top: 1px solid var(--ep-rule); }
.tl-mark { position: relative; display: flex; justify-content: center; padding-top: 26px; }
.tl-mark::before { content: ""; position: absolute; left: calc(50% - .5px); top: 0; bottom: 0; width: 1px; background: var(--ep-rule-strong); }
.tl-item:first-child .tl-mark::before { top: 30px; }
.tl-item:last-child .tl-mark::before { bottom: auto; height: 30px; }
.tl-mark .glyph { position: relative; width: 11px; height: 11px; color: var(--ep-text); background-color: var(--ep-ground); }
.tl-mark .glyph-solid { background-color: currentColor; }
.tl-body { padding: 20px 0 24px; border-top: 1px solid var(--ep-rule); display: grid; gap: 6px; min-width: 0; }
.tl-body p { color: var(--ep-text-2); font-size: 15.5px; line-height: 1.55; }
.tl-body .datum { margin-top: var(--ep-space-2); }
.tl-item.is-next .tl-date, .tl-item.is-next .tl-body { border-top-style: dashed; border-top-color: var(--ep-rule-strong); }
.tl-item.is-next .tl-date { color: var(--ep-text); }
@media (max-width: 620px) {
  .tl-item { grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--ep-space-3); }
  .tl-date { grid-column: 2; grid-row: 1; padding: 18px 0 0; }
  .tl-mark { grid-column: 1; grid-row: 1 / span 2; padding-top: 22px; }
  .tl-body { grid-column: 2; border-top: 0; padding-top: 6px; }
  .tl-item:first-child .tl-mark::before { top: 26px; }
  .tl-item:last-child .tl-mark::before { height: 26px; }
}

/* ---------- quorum: three keys, the threshold after the second ---------- */
.quorum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; position: relative; }
.q-cell { display: grid; gap: var(--ep-space-3); align-content: start; border: 1.5px solid var(--ep-rule-strong); padding: var(--ep-space-4); min-height: 148px; min-width: 0; }
.q-cell .ic { width: 28px; height: 28px; color: var(--ep-text-2); }
.q-cell .q-name { font-stretch: var(--ep-width-heading); font-weight: 600; font-size: 17px; line-height: 1.25; }
.q-cell .q-sub { font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; color: var(--ep-text-2); overflow-wrap: anywhere; }
.q-cell.is-ours { background: var(--ep-inverse); border-color: var(--ep-inverse); color: var(--ep-on-inverse); }
.q-cell.is-ours .ic, .q-cell.is-ours .q-sub { color: var(--ep-on-inverse); }
/* on the inverse cell the highlight inverts again, or a selection would not show */
.q-cell.is-ours::selection, .q-cell.is-ours ::selection { background: var(--ep-on-inverse); color: var(--ep-inverse); }
.q-rule { position: absolute; top: -10px; bottom: -10px; left: calc((100% - 8px) / 3 * 2 + 5px); width: 2px; background: var(--ep-text); }
.q-caption { display: flex; justify-content: space-between; gap: var(--ep-space-4); margin-top: var(--ep-space-3); }
@media (max-width: 620px) {
  .q-cell { min-height: 118px; padding: var(--ep-space-3); }
  .q-cell .q-name { font-size: 15px; }
}

/* ---------- closing band: large link plates (the heading's link covers the plate) ---------- */
.band-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ep-col-gap); }
.band-link {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--ep-space-5); min-height: 260px; min-width: 0;
  padding: clamp(20px, 2.6vw, 32px); background: var(--ep-panel); border: 1px solid var(--ep-rule);
  transition: border-color .15s, background-color .15s;
}
.band-link:hover { border-color: var(--ep-text); background: var(--ep-panel-raised); }
.band-link:hover .lbl { color: var(--ep-text-2); }
.band-link:focus-within { outline: 2px solid var(--ep-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ep-focus-halo); }
.band-link-a { color: inherit; text-decoration: none; }
.band-link-a::after { content: ""; position: absolute; inset: 0; }
.band-link-a:focus-visible { outline: none; box-shadow: none; } /* the plate shows the focus */
.band-link-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ep-space-4); }
.band-link-top .ic { width: 32px; height: 32px; color: var(--ep-text-2); }
.band-link h3 { font-stretch: var(--ep-width-display); font-weight: 520; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; letter-spacing: -.01em; }
.band-link p { color: var(--ep-text-2); font-size: 15.5px; }
.band-link-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--ep-space-4); border-top: 1px solid var(--ep-rule); padding-top: var(--ep-space-4); color: var(--ep-text); }
.band-link-foot .mono { font-size: 12.5px; color: var(--ep-text-2); overflow-wrap: anywhere; min-width: 0; }
.band-link-foot .ic { width: 22px; height: 22px; transition: transform .15s; }
.band-link:hover .band-link-foot .ic { transform: translateX(3px); }
@media (max-width: 760px) { .band-links { grid-template-columns: minmax(0, 1fr); } .band-link { min-height: 0; } }

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

/* ---------- print ---------- */
@media print {
  .notice, .site-menu, .menu-button, .skip-link, .copy { display: none !important; }
  /* a surface pinned to a dark colourway (a brand sample) prints with its ground */
  .ep-carbon, .ep-fathom, .ep-dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* browsers print without backgrounds unless told: keep what carries meaning in its fill (state
     glyphs, the live dot, inverse cells and bands, the Mining matrix: pages/mining.css), and turn
     the solid button into an outline, since its light label would land on white paper */
  .st::before, .glyph, .live::before, .q-cell.is-ours { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .btn:not(.btn-quiet) { background: transparent; color: var(--ep-text); border-color: var(--ep-text); }
  body { font-size: 11pt; }
  a { text-decoration: underline; }
}

/* very narrow phones (below 360 px): the strip stacks */
@media (max-width: 359px) {
  .strip-cells { grid-template-columns: minmax(0, 1fr); }
  .strip-cell { min-height: 0; }
}