/* Shipmate — the landing page. The console's Bill of Lading, set to persuade:
   form stock, one ink, carbon-typed values, rubber stamps only for state. */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-wdth-5.3.0.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-5.3.0.woff2) format('woff2-variations');
}

:root {
  --stock: #f1efe6;
  --stock-deep: #e7e3d6;
  --sheet: #f7f5ee;
  --ink: #1d2329;
  --ink-2: #474f57;
  --ink-3: #5f666c;
  --rule: #1d2329;
  --rule-soft: rgb(29 35 41 / 0.18);
  --carbon: #2b3f8f;
  --carbon-wash: rgb(43 63 143 / 0.08);
  --cleared: #2f6b3a;
  --attention: #93560a;
  --held: #b3261e;
  --sealed: #5b3a8e;

  --font: 'Archivo Variable', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
  --chatfont: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(16px, 3vw, 32px);
  --hair: 1px solid var(--rule);
  --hair-soft: 1px solid var(--rule-soft);

  color-scheme: light;
  accent-color: var(--carbon);
  caret-color: var(--carbon);
}

/* Night shift: the same stock under a warm desk lamp. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --stock: #1c1915; --stock-deep: #25211b; --sheet: #221e19;
    --ink: #efe8d8; --ink-2: #c4bba8; --ink-3: #998f7e;
    --rule: #efe8d8; --rule-soft: rgb(239 232 216 / 0.17);
    --carbon: #a7b2e6; --carbon-wash: rgb(167 178 230 / 0.10);
    --cleared: #7ec68c; --attention: #e5a94d; --held: #f27b6f; --sealed: #bea4ef;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --stock: #1c1915; --stock-deep: #25211b; --sheet: #221e19;
  --ink: #efe8d8; --ink-2: #c4bba8; --ink-3: #998f7e;
  --rule: #efe8d8; --rule-soft: rgb(239 232 216 / 0.17);
  --carbon: #a7b2e6; --carbon-wash: rgb(167 178 230 / 0.10);
  --cleared: #7ec68c; --attention: #e5a94d; --held: #f27b6f; --sealed: #bea4ef;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--ink-3) var(--stock-deep);
}
::selection { background: var(--carbon); color: var(--stock); }
:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre { font-variant-ligatures: none; }
code { font-family: var(--mono); font-size: 0.88em; font-variant-numeric: tabular-nums; }
a { color: var(--carbon); text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--stock); padding: 8px 14px; font-weight: 650;
}
.skip:focus { top: 8px; }

/* caption: the small-caps label printed in every box */
.cap {
  font-size: 11px;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.2;
}

/* ── the sheet ─────────────────────────────────────────────────────────── */
.sheet {
  max-width: 1240px;
  margin: 0 auto;
  border-left: var(--hair);
  border-right: var(--hair);
  border-bottom: var(--hair);
  background: var(--stock);
}
main > section { border-bottom: var(--hair); }

/* ── document head ──────────────────────────────────────────────────────── */
.dochead {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: stretch;
  border-bottom: var(--hair);
  background: var(--stock-deep);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--gutter);
  border-right: var(--hair);
  color: var(--ink);
  text-decoration: none;
}
.wordmark .mark { width: 26px; height: 26px; color: var(--ink); flex: none; }
.wordmark .name {
  font-size: 22px;
  font-weight: 800;
  font-stretch: 70%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.docmeta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  justify-content: end;
  margin: 0;
}
.docmeta > div {
  padding: 10px 18px;
  border-left: var(--hair-soft);
  display: grid;
  gap: 2px;
  align-content: center;
}
.docmeta dd { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--carbon); white-space: nowrap; }
.themeswitch {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 13px; color: var(--carbon);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.headcta { align-self: center; margin: 0 var(--gutter) 0 18px; }
/* Site menu: a divider tab in the document head, ink bar under the page you're on. */
.docnav { display: flex; align-items: stretch; border-left: var(--hair-soft); }
.docnav a {
  position: relative; display: flex; align-items: center; padding: 0 20px;
  color: var(--ink-2); text-decoration: none;
  font-size: 13px; font-weight: 650; font-stretch: 80%; letter-spacing: 0.06em; text-transform: uppercase;
}
.docnav a:hover, .docnav a[aria-current='page'] { background: var(--sheet); color: var(--ink); }
.docnav a[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ink); }

/* ── buttons: ruled, square, stamped on press ────────────────────────────── */
.btn {
  appearance: none;
  border: 1.5px solid var(--ink);
  background: var(--sheet);
  color: var(--ink);
  padding: 9px 16px;
  font-weight: 650;
  font-size: 15px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--ink); color: var(--stock); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--stock); }
.btn.primary:hover:not(:disabled) { background: var(--carbon); border-color: var(--carbon); }
.linkbtn {
  appearance: none; border: 0; background: none; padding: 0;
  color: var(--carbon); font-weight: 600; font-size: 15px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* ── hero: the claim on the left, the request box on the right ───────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}
.hero-copy { padding: clamp(28px, 3.6vw, 44px) var(--gutter) clamp(24px, 3vw, 36px); }
.hero h1 {
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 750;
  font-stretch: 85%;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
  max-width: 22ch;
}
.lede {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 780px;
  text-wrap: pretty;
}
.quick {
  border-left: var(--hair);
  background: var(--sheet);
  display: flex;
  flex-direction: column;
}
.quick-head { padding: clamp(24px, 3vw, 36px) var(--gutter) 14px; display: grid; gap: 4px; align-content: start; }
.quick .formfoot { flex: 1; align-items: flex-start; align-content: flex-start; }
.quick-head h2 { font-size: 22px; letter-spacing: -0.01em; }
.quick-head p { font-size: 15px; color: var(--ink-2); }
.quick .row { border-top: var(--hair-soft); }

/* ── forms: ruled rows, carbon typing ────────────────────────────────────── */
.row {
  display: grid;
  gap: 6px;
  padding: 12px var(--gutter) 12px;
  border-bottom: var(--hair-soft);
  background: var(--sheet);
  margin: 0;
  min-width: 0;
}
fieldset.row { border-left: 0; border-right: 0; border-top: 0; }
.row legend { padding: 0; float: left; width: 100%; margin-bottom: 6px; }
.row:focus-within { background: var(--carbon-wash); }
.row input[type='email'], .row input[type='text'], .row select, .row textarea {
  appearance: none;
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  padding: 2px 0 4px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--carbon);
  border-radius: 0;
}
.row textarea { resize: vertical; min-height: 4.5em; line-height: 1.45; }
.row select { cursor: pointer; padding-right: 22px; }
.selectwrap { position: relative; display: block; }
.selectwrap::after {
  content: ''; position: absolute; right: 4px; top: 40%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-50%) rotate(45deg); pointer-events: none;
}
.row input:focus, .row select:focus, .row textarea:focus { outline: 0; border-bottom-color: var(--carbon); }
.row input::placeholder, .row textarea::placeholder { color: var(--ink-3); opacity: 1; }
.row[data-invalid] input { border-bottom-color: var(--held); }
.req { color: var(--ink-2); font-weight: 500; letter-spacing: 0.06em; margin-left: 6px; }
.req::before { content: '· '; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; padding-top: 2px; }
.checks label { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.checks input { width: 16px; height: 16px; margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; }
.row2 > .row + .row { border-left: var(--hair-soft); }
.formfoot {
  display: flex;
  gap: 10px 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px var(--gutter) 16px;
  background: var(--sheet);
}
.formstatus { font-size: 14px; color: var(--ink-2); flex: 1 1 200px; }
.formstatus[data-tone='bad'] { color: var(--held); }
.formstatus[data-tone='good'] { color: var(--ink); font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.target-msg { display: none; padding: 12px var(--gutter); background: var(--sheet); font-weight: 650; border-bottom: var(--hair-soft); }
.target-msg.bad { color: var(--held); }
.target-msg:target { display: block; }

h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 750;
  font-stretch: 85%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

/* ── the logbook: real jobs, one selected at a time ──────────────────────── */
.loghead { padding: clamp(28px, 3.6vw, 44px) var(--gutter) 18px; display: grid; gap: 8px; border-bottom: var(--hair); }
.loghead .note { font-size: 14px; color: var(--ink-2); max-width: 80ch; }
.logbody { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.joblist { display: flex; flex-direction: column; border-right: var(--hair); background: var(--stock); }
.job {
  appearance: none; border: 0; border-bottom: var(--hair-soft); background: transparent;
  text-align: left; padding: 14px var(--gutter); display: grid; gap: 6px; align-content: start;
  cursor: pointer; position: relative; color: var(--ink-2); font: inherit;
}
.job:hover { background: var(--sheet); color: var(--ink); }
.job[aria-selected='true'] { background: var(--sheet); color: var(--ink); }
/* The selected job drops the tab's 3px ink bar onto the rule it shares with the thread. */
.job[aria-selected='true']::after { content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 3px; background: var(--ink); }
.job-when { font-family: var(--mono); font-size: 12px; color: var(--carbon); font-variant-numeric: tabular-nums; }
.job-ask { font-size: 15px; line-height: 1.35; }
.job[aria-selected='true'] .job-ask { font-weight: 650; }
.job-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; }
.job-skill { font-size: 12px; color: var(--ink-2); }
.threads { padding: 18px var(--gutter) 26px; background: var(--sheet); min-width: 0; display: grid; gap: 28px; align-content: start; }
.thread { display: grid; gap: 10px; min-width: 0; }
.thread:focus-visible { outline-offset: 4px; }
.thread-h { font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.thread .chat { max-width: 780px; }
html.js .thread[hidden] { display: none; }
/* Without JavaScript the jobs simply stack, each under its own caption. */
html:not(.js) .joblist { display: none; }
html:not(.js) .logbody { grid-template-columns: minmax(0, 1fr); }

/* stamps: word + shape carry state; colour only reinforces */
.stamp {
  --ink-s: var(--cleared);
  display: inline-grid;
  place-items: center;
  padding: 10px 22px 9px;
  color: var(--ink-s);
  font-weight: 850;
  font-stretch: 62.5%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  transform: rotate(-3deg);
  mix-blend-mode: multiply;
  white-space: nowrap;
}
:root[data-theme='dark'] .stamp { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .stamp { mix-blend-mode: normal; } }
.stamp.big { font-size: clamp(36px, 3.6vw, 48px); }
.stamp.small { font-size: 13px; padding: 4px 9px 3px; transform: none; letter-spacing: 0.08em; }
.stamp.cleared { border: 6px double var(--ink-s); border-radius: 10px; }
.stamp.small.cleared { border-width: 3px; border-radius: 5px; }
.stamp.held {
  --ink-s: var(--held);
  border: 5px solid var(--ink-s);
  background: linear-gradient(var(--ink-s), var(--ink-s)) left 50% / 100% 3px no-repeat;
  padding-inline: 26px;
}
.stamp.held > span { background: var(--sheet); padding: 0 8px; }
.stamp.never { --ink-s: var(--ink-3); border: 2px dashed var(--ink-s); }
.stamp.sealed { --ink-s: var(--sealed); border: 2px solid var(--ink-s); border-radius: 999px; outline: 1px solid var(--ink-s); outline-offset: 2px; padding: 4px 12px 3px; font-size: 13px; letter-spacing: 0.08em; transform: none; }
/* The one authored moment: a stamp strikes in a hard two-step, every frame legible.
   On the landing page it strikes on the job you just opened, never on load. */
@keyframes strike-small {
  0%   { transform: scale(1.16); opacity: 0.45; }
  50%  { transform: scale(1.04); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
.job.strike .stamp.small:not(.never) { animation: strike-small 180ms steps(1, end); }
@media (prefers-reduced-motion: reduce) { .job.strike .stamp.small:not(.never) { animation: none; } }
.sealhead .stamp.sealed { font-size: 16px; padding: 7px 16px 6px; transform: rotate(-3deg); }


/* ── the chats: Discord's own chrome, as an exhibit ────────────────────────── */
.chat {
  --c-bg: #fff; --c-fg: #313338; --c-dim: #5c5e66; --c-line: #e3e5e8;
  --c-code: #f2f3f5; --c-codeline: #e3e5e8; --c-at: #505cdc; --c-atbg: rgb(88 101 242 / 0.15);
  --c-react: #f2f3f5; --c-tag: #5865f2; --c-tagfg: #fff; --c-name: #060607;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--chatfont);
  font-size: 15px;
  line-height: 1.46;
  border: 1px solid var(--rule-soft);
  min-width: 0;
  overflow: hidden;
}
.chat p { margin: 0; }
.chat-top { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--c-line); font-weight: 600; font-size: 15px; }
.msgs { padding: 8px 0 12px; display: grid; }
.msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 8px 16px; }
.mb { display: grid; gap: 4px; min-width: 0; }
.meta { font-size: 12px; color: var(--c-dim); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.meta b { font-size: 15px; color: var(--c-name); font-weight: 600; }
.av {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 13px/1 var(--chatfont); letter-spacing: 0.02em;
  background: #4a6a85; color: #fff;
}
.av-ship { background: #1d2329; color: #f1efe6; }
.av-ship svg { width: 26px; height: 26px; }
.at { color: var(--c-at); background: var(--c-atbg); border-radius: 3px; padding: 0 2px; font-weight: 500; }
.apptag { font-size: 11px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: var(--c-tag); color: var(--c-tagfg); letter-spacing: 0.02em; }
.reacts { display: flex; gap: 6px; margin-top: 2px; }
.react { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; padding: 1px 7px; border-radius: 8px; background: var(--c-react); color: var(--c-dim); }
.chat .reply { display: grid; gap: 8px; }
.chat code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chat pre {
  margin: 2px 0; padding: 8px 10px;
  background: var(--c-code); border: 1px solid var(--c-codeline); border-radius: 4px;
  white-space: pre; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--c-dim) transparent;
}
/* A table wider than the exhibit fades at the right edge until it's scrolled to the end. */
.chat pre.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.chat pre code { font-size: 12.5px; color: var(--c-fg); }
.chat .reply :not(pre) > code { font-size: 12.5px; padding: 1px 3px; border-radius: 3px; background: var(--c-code); border: 1px solid var(--c-codeline); }

/* The chats follow the page into Night shift, the way Discord's dark theme looks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .chat { --c-bg: #313338; --c-fg: #dbdee1; --c-dim: #949ba4; --c-line: #3f4147; --c-code: #2b2d31; --c-codeline: #1e1f22; --c-at: #c9cdfb; --c-atbg: rgb(88 101 242 / 0.3); --c-react: #2b2d31; --c-name: #f2f3f5; }
  :root:not([data-theme='light']) .av-ship { background: #efe8d8; color: #1c1915; }
}
:root[data-theme='dark'] .chat { --c-bg: #313338; --c-fg: #dbdee1; --c-dim: #949ba4; --c-line: #3f4147; --c-code: #2b2d31; --c-codeline: #1e1f22; --c-at: #c9cdfb; --c-atbg: rgb(88 101 242 / 0.3); --c-react: #2b2d31; --c-name: #f2f3f5; }
:root[data-theme='dark'] .av-ship { background: #efe8d8; color: #1c1915; }

/* ── band heads ───────────────────────────────────────────────────────────── */
.bandhead { padding: clamp(32px, 4vw, 48px) var(--gutter) 22px; display: grid; gap: 10px; border-bottom: var(--hair-soft); }
.bandhead p { color: var(--ink-2); max-width: 70ch; font-size: 17px; text-wrap: pretty; }

.bandhead-sub { border-top: var(--hair); padding-top: clamp(26px, 3vw, 36px); }
.bandhead h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 750; font-stretch: 85%; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }

/* ── ledger: how a change ships ──────────────────────────────────────────── */
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; }
.ledger thead th {
  text-align: left; padding: 10px 16px 8px; background: var(--stock-deep);
  border-bottom: var(--hair);
  font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.ledger thead th:first-child, .ledger tbody th { padding-left: var(--gutter); }
.ledger tbody th, .ledger td { padding: 14px 16px; border-bottom: var(--hair-soft); vertical-align: top; background: var(--sheet); text-align: left; }
.ledger tbody tr:last-child > * { border-bottom: 0; }
.ledger tbody th {
  font-size: 15px; font-weight: 800; font-stretch: 70%; letter-spacing: 0.06em; text-transform: uppercase;
  width: 14%; white-space: nowrap;
}
.ledger td:nth-child(2) { width: 46%; }
.ledger td:last-child { color: var(--ink-2); }

/* ── declarations: ruled box grid ────────────────────────────────────────── */
.declarations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field {
  padding: 14px 16px 18px;
  border-right: var(--hair-soft);
  border-bottom: var(--hair-soft);
  display: grid;
  gap: 8px;
  align-content: start;
  background: var(--sheet);
  min-width: 0;
}
.field:nth-child(4n) { border-right: 0; }
.field:nth-last-child(-n + 4) { border-bottom: 0; }
.field .val {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--carbon);
  line-height: 1.2;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-soft);
}
.field .sub { font-size: 14px; color: var(--ink-2); }

/* ── splits ──────────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-a { padding: clamp(32px, 4vw, 48px) var(--gutter); display: grid; gap: 14px; align-content: start; }
.split-a > p { color: var(--ink-2); max-width: 60ch; font-size: 17px; text-wrap: pretty; }
.split-b { border-left: var(--hair); background: var(--sheet); min-width: 0; }
.sealhead { margin-top: 10px; }

.sealedlist { list-style: none; margin: 0; padding: 0; }
.sealedlist li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px var(--gutter); border-bottom: var(--hair-soft); align-items: start; }
.sealedlist li:last-child { border-bottom: 0; }
.sealno {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--sealed); color: var(--sealed);
  display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.sealedlist strong { display: block; font-weight: 650; }
.sealedlist span:not(.sealno) { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.sealedlist code { color: var(--sealed); }

.facts { margin: 8px 0 0; display: grid; border-top: var(--hair-soft); }
.facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: var(--hair-soft); align-items: baseline; }
.facts dd { margin: 0; font-family: var(--mono); font-size: 15px; color: var(--carbon); }
.facts dd span { display: block; font-family: var(--font); font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.facts dd span code { color: var(--ink); }

.termcap { margin: 0; padding: clamp(24px, 3vw, 36px) var(--gutter); display: grid; gap: 12px; }
.termcap pre {
  margin: 0; padding: 18px 20px; background: var(--stock); border: var(--hair);
  font-family: var(--mono); font-size: 14px; line-height: 1.65; color: var(--carbon);
  overflow-x: auto; white-space: pre;
}
.termcap pre code { font-size: inherit; }
.termcap .c { color: var(--ink-2); }
.termcap .linkbtn { justify-self: start; }

/* ── questions ───────────────────────────────────────────────────────────── */
.qa { margin: 0; }
.qa > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-bottom: var(--hair-soft); background: var(--sheet); }
.qa > div:last-child { border-bottom: 0; }
.qa dt { padding: 16px var(--gutter); font-weight: 650; font-size: 17px; border-right: var(--hair-soft); }
.qa dd { margin: 0; padding: 16px var(--gutter); color: var(--ink-2); max-width: 75ch; }

/* ── request ─────────────────────────────────────────────────────────────── */
.request h2 { font-size: clamp(28px, 3.6vw, 44px); }
.request .split-b { display: grid; }
.full .row:first-child { border-top: 0; }

/* ── footer: the seals band, static at the foot of the sheet ─────────────── */
.sealsband {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px var(--gutter);
  background: var(--stock-deep);
  font-size: 14px; color: var(--ink-2);
}
.sealsband p { flex: 1 1 320px; }
.sealsband strong { color: var(--ink); font-weight: 650; }

/* ── secondary pages ─────────────────────────────────────────────────────── */
.stampcell { display: grid; place-items: center; padding: 24px 16px; border-right: var(--hair); background: var(--sheet); min-height: 120px; }
.demotitle { padding: 18px var(--gutter) 16px; display: grid; gap: 6px; align-content: center; }
.pagetitle {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 750;
  font-stretch: 85%;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
.prose .qa a { color: var(--carbon); }
.notfound { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
.notfound .demotitle { padding-block: 40px; }

/* ── docs: one long sheet, a contents ledger pinned beside the reading column ── */
.doctitle { border-bottom: var(--hair); }
.doctitle p { max-width: 70ch; }
.docs { display: grid; grid-template-columns: minmax(220px, 268px) minmax(0, 1fr); }
.toc {
  position: sticky; top: 0; align-self: start;
  max-height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.toc-g + .toc-g { border-top: var(--hair-soft); }
.toc-cap { padding: 10px var(--gutter) 8px; background: var(--stock-deep); border-bottom: var(--hair-soft); }
.toc a {
  display: block; position: relative;
  padding: 7px var(--gutter); border-bottom: var(--hair-soft);
  font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none;
}
.toc-g a:last-child { border-bottom: 0; }
.toc a:hover { background: var(--sheet); color: var(--ink); }
.toc a[aria-current='true'] { background: var(--sheet); color: var(--ink); font-weight: 650; }
/* The current section drops the tab's 3px ink bar onto the rule it shares with the page. */
.toc a[aria-current='true']::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--ink); }

.doc { border-left: var(--hair); min-width: 0; }
.dsec {
  display: grid; gap: 16px; align-content: start; min-width: 0;
  padding: clamp(30px, 3.6vw, 44px) var(--gutter) clamp(30px, 3.4vw, 40px);
  border-bottom: var(--hair);
}
.dsec:last-child { border-bottom: 0; }
.dsec h2 { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 2px; }
.dsec h3 {
  margin-top: 18px; font-size: 21px; font-weight: 700; font-stretch: 85%;
  letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance;
}
.dsec > p { max-width: 72ch; text-wrap: pretty; }
.doc code { font-size: 0.86em; color: var(--carbon); overflow-wrap: anywhere; }
.doc .facts { margin: 0; max-width: 72ch; }
/* A fact that is a phrase, not a typed value, leads in ink rather than carbon mono. */
.facts dd.lead { font-family: var(--font); font-size: 16px; font-weight: 650; color: var(--ink); }
.facts dd.lead span { font-weight: 400; }
.doc .facts dd code { color: var(--ink); }

/* Reference tables run edge to edge across the column, like the ledger bands. */
.dsec > .ledger, .dsec > .ref {
  margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter));
  border-top: var(--hair); border-bottom: var(--hair);
}
.dsec > .ledger tbody th { width: 12%; }
/* A table that ends its section closes on the section's own rule. */
.dsec > :is(.ref, .ledger):last-child { border-bottom: 0; }
.dsec:has(> :is(.ref, .ledger):last-child) { padding-bottom: 0; }
.ref { border-collapse: collapse; font-size: 15px; }
.ref thead th {
  text-align: left; padding: 10px 16px 8px; background: var(--stock-deep); border-bottom: var(--hair);
  font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.ref thead th:first-child, .ref tbody th { padding-left: var(--gutter); }
.ref thead th:last-child, .ref td:last-child { padding-right: var(--gutter); }
.ref tbody th, .ref td { padding: 11px 16px; border-bottom: var(--hair-soft); vertical-align: top; text-align: left; background: var(--sheet); }
.ref tbody tr:last-child > * { border-bottom: 0; }
.ref tbody th { width: 32%; font-weight: 650; }
.ref tbody th code { font-size: 13.5px; overflow-wrap: normal; }
/* The verdict marks sit on a dark cell, as they do in chat, so the pale ❔ still reads. */
.ref.marks tbody th { width: 72px; padding-right: 0; background: var(--ink); font-size: 20px; line-height: 1; text-align: center; padding-left: 16px; }
.ref.marks strong { color: var(--ink); font-weight: 650; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ref.marks tbody th { background: var(--stock-deep); } }
:root[data-theme='dark'] .ref.marks tbody th { background: var(--stock-deep); }

/* Commands: a ruled capture with a caption strip and a Copy key. */
.code { margin: 2px 0 0; min-width: 0; max-width: 100%; }
.code figcaption {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 5px 6px 5px 14px; border: var(--hair); border-bottom: 0; background: var(--stock-deep);
}
.code pre {
  margin: 0; padding: 14px 16px; background: var(--sheet); border: var(--hair);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--carbon);
  overflow-x: auto; white-space: pre; tab-size: 2; scrollbar-width: thin;
}
.code pre code { font-size: inherit; color: inherit; overflow-wrap: normal; }
.code .c { color: var(--ink-2); }
/* A line that runs past the frame fades at the right edge until it's scrolled to the end. */
.code pre.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.copy {
  appearance: none; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--sheet); color: var(--ink);
  padding: 3px 10px; cursor: pointer;
  font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4;
}
.copy:hover, .copy[data-copied] { background: var(--ink); color: var(--stock); }
.copy:active { transform: translateY(1px); }
html:not(.js) .copy { display: none; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: var(--hair-soft); max-width: 72ch; }
.steps li { counter-increment: step; position: relative; padding: 10px 0 10px 34px; border-bottom: var(--hair-soft); }
.steps li::before {
  content: counter(step); position: absolute; left: 2px; top: 11px;
  font-family: var(--mono); font-size: 13px; color: var(--carbon); font-variant-numeric: tabular-nums;
}
.plain { margin: 0; padding-left: 18px; display: grid; gap: 8px; max-width: 72ch; list-style: square; }
.plain li::marker { color: var(--ink-3); }
.plain strong { font-weight: 650; }
.dsec .note { display: grid; gap: 6px; max-width: 72ch; padding: 12px 16px 14px; border: var(--hair-soft); background: var(--sheet); }
.dsec .note p:not(.cap) { font-size: 15px; text-wrap: pretty; }
.sealsband .linkbtn + .linkbtn { margin-left: 4px; }
/* Preview: the unstruck stamp (nothing final yet), its word in caption ink for small-text contrast. */
.dsec h3 .stamp.preview { color: var(--ink-2); margin-left: 8px; vertical-align: 3px; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .declarations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field:nth-child(4n) { border-right: var(--hair-soft); }
  .field:nth-child(2n) { border-right: 0; }
  .field:nth-last-child(-n + 4) { border-bottom: var(--hair-soft); }
  .field:nth-last-child(-n + 2) { border-bottom: 0; }
}
/* The head's facts step down as the head narrows. `.docmeta >` outranks the
   `.docmeta > div` grid rule, which a bare class never did. */
@media (max-width: 1080px) {
  .docmeta > .dm-chat { display: none; }
}
@media (max-width: 940px) {
  .docmeta > .dm-runs { display: none; }
}
@media (max-width: 900px) {
  /* the contents ledger becomes a strip of section tabs that stays at the top */
  .docs { grid-template-columns: minmax(0, 1fr); }
  .toc {
    z-index: 3; display: flex; max-height: none; overflow-x: auto; overflow-y: hidden;
    background: var(--stock-deep); border-bottom: var(--hair); scrollbar-width: none;
  }
  .toc::-webkit-scrollbar { display: none; }
  .toc-g { display: contents; }
  .toc-cap { display: none; }
  .toc a { flex: none; white-space: nowrap; padding: 10px 14px; font-size: 13px; border-bottom: 0; border-right: var(--hair-soft); }
  .toc a[aria-current='true']::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 3px; }
  .doc { border-left: 0; }
  .dsec, .dsec h3 { scroll-margin-top: 44px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-b { border-left: 0; border-top: var(--hair); }
  .qa > div { grid-template-columns: minmax(0, 1fr); }
  .qa dt { border-right: 0; padding-bottom: 4px; }
  .qa dd { padding-top: 0; }
}
@media (max-width: 760px) {
  .sheet { border-left: 0; border-right: 0; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .quick { border-left: 0; border-top: var(--hair); }
  .notfound { grid-template-columns: minmax(0, 1fr); }
  /* the job list becomes a strip of tabs you swipe along, above the thread */
  .logbody { grid-template-columns: minmax(0, 1fr); }
  .joblist { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-right: 0; border-bottom: var(--hair); }
  .job { flex: 0 0 min(78%, 260px); scroll-snap-align: start; border-bottom: 0; border-right: var(--hair-soft); }
  .job[aria-selected='true']::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 3px; }
  .threads { padding-inline: 12px; }
  .stampcell { border-right: 0; border-bottom: var(--hair); min-height: 120px; }
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: auto; }
  .ledger tr { border-bottom: var(--hair-soft); background: var(--sheet); padding: 14px var(--gutter); }
  .ledger tbody tr:last-child { border-bottom: 0; }
  .ledger tbody th, .ledger td, .ledger td:nth-child(2) { padding: 0; border: 0; width: auto; }
  .ledger tbody th { margin-bottom: 6px; }
  .ledger td + td { margin-top: 8px; font-size: 14px; }
  .ledger td + td::before { content: 'Held in place by  '; display: block; font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .row2 > .row + .row { border-left: 0; }
  /* reference tables fold into one ruled block per row, captions inlined */
  .ref thead { display: none; }
  .ref, .ref tbody, .ref tr, .ref th, .ref td { display: block; width: auto; }
  .ref tr { padding: 12px var(--gutter); border-bottom: var(--hair-soft); background: var(--sheet); }
  .ref tbody tr:last-child { border-bottom: 0; }
  .ref tbody th, .ref td, .ref td:last-child { padding: 0; border: 0; width: auto; }
  .ref td { margin-top: 6px; }
  /* Folded on a phone, a long identifier may break rather than push the page sideways. */
  .ref tbody th code { overflow-wrap: anywhere; }
  .ref td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  }
  .dsec > .ledger tbody th { width: auto; }
  .code pre { font-size: 12.5px; padding: 12px 14px; }
}
@media (max-width: 620px) {
  .dochead { grid-template-columns: minmax(0, 1fr) auto auto; }
  .docnav a { padding: 0 12px; font-size: 12px; }
  .docmeta { display: none; }
  .wordmark { border-right: 0; }
  .headcta { margin-left: 0; padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 560px) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .msg { padding: 8px 12px; }
  .chat pre code { font-size: 11.5px; }
  .termcap pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
}
@media (max-width: 460px) {
  .declarations { grid-template-columns: minmax(0, 1fr); }
  .field { border-right: 0 !important; }
  .field:nth-last-child(-n + 2) { border-bottom: var(--hair-soft); }
  .field:last-child { border-bottom: 0; }
}