/* hci.sh: shared by every page. Taken from docs/boards/home/v1.html (locked 2026-10-07). */

/* =====================================================================
   One grid: [l] left margin 200 · [t] reading column 584 · [s] right margin 260
   ===================================================================== */
:root {
  --paper: #fbfbf9;
  --ink: #111111;
  --g1: #5f5f5b;      /* secondary text */
  --g2: #8c8c87;      /* the grey half of a statement, labels */
  --g3: #b4b4b0;      /* faint numbers */
  --rule: #dcdcd6;    /* hairline */
  --stock: #ffffff;   /* card stock */
  --cell: #f0f0ec;    /* placeholder cell */
  --accent: #c2391b;  /* rust: note numbers and "Not sure" */
  --focus: #1f45d6;

  /* type scale */
  --s1: 16px;  --lh1: 1.5;
  --s2: 28px;  --lh2: 1.18;  --ls2: -.012em;
  --lab: 12.5px;
  --wm: 22px;

  /* spacing: the comfortable rhythm */
  --sec: 128px; --lede: 44px; --inner: 52px; --hero-b: 96px;

  /* grid */
  --m: 32px; --rail: 200px; --gut: 56px; --col: 584px; --gap: 48px; --side: 260px;
  --cols: [l] var(--rail) [lg] var(--gut) [t] minmax(0, var(--col)) [g] var(--gap) [s] var(--side) [e] minmax(0, 1fr) [x];
  --pin: 28px;        /* where a section's margin label sticks */
}

/* ---------- type: Schibsted Grotesk for text, DM Mono for codes and numbers (locked 2026-10-07) ---------- */
:root {
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --w-st: 500; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-mono: 500;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--s1)/var(--lh1) var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p, ol, ul, dl, dd, figure, table { margin: 0; padding: 0; }
h1, h2, h3 { font: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: var(--lab); font-variant-numeric: tabular-nums; letter-spacing: 0; font-weight: 400; }
.grey { color: var(--g1); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ---------- rows on the grid ---------- */
.row { display: grid; grid-template-columns: var(--cols); padding: 0 var(--m); align-items: start; }
.c-l { grid-column: l / lg; }
.c-t { grid-column: t / g; }
.c-s { grid-column: s / e; }
.c-f { grid-column: t / x; }
.row > * { grid-row: 1; }
.top2 > .lede, .top2 > .c-s { grid-row: 2; }
main { position: relative; }
.sec { position: relative; padding-bottom: var(--sec); }

/* ---------- header: a small nav top right, no rule; the wordmark heads the column ---------- */
.mast { position: relative; z-index: 50; }
.mbar { display: flex; align-items: baseline; padding: 16px var(--m) 0; }
nav.words { margin-left: auto; display: flex; gap: 20px; }
nav.words a { text-decoration: none; color: var(--g1); }
nav.words a:hover { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { nav.words a { transition: color 140ms linear; } }
.wordmark { display: inline-block; font-size: var(--wm); font-weight: var(--w-bold); letter-spacing: .03em; line-height: 1; margin: 34px 0 30px; text-decoration: none; }

/* ---------- left margin: page number and section name, sticky per section ----------
   The rail spans the whole section; the label sticks inside it and leaves with the section's end. */
.row > .rail { grid-area: auto; }
.rail { position: absolute; top: 0; bottom: 0; left: var(--m); width: var(--rail); padding-top: calc(var(--lede) + 23px); }
.hero > .rail { padding-top: 3px; }
.rh { position: sticky; top: var(--pin); color: var(--g2); line-height: 1.3; }
.rh .folio { display: block; color: var(--ink); margin-bottom: 4px; }
.rh .of { color: var(--g3); }

/* ---------- statements: black running into grey ---------- */
.statement { font-size: var(--s2); line-height: var(--lh2); font-weight: var(--w-st); letter-spacing: var(--ls2); text-wrap: pretty; }
.statement > p, .statement > h1, .statement > h2, .statement > span { display: inline; font: inherit; }
.statement .rest { color: var(--g2); }
.statement a.rest { text-decoration: none; }
.statement a.rest:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; padding-bottom: var(--hero-b); }
.eyebrow { color: var(--g1); margin-bottom: 14px; }
.pitch { margin-top: 28px; }
.pitch ol { list-style: lower-alpha outside; margin-top: 10px; }
.pitch li { padding-left: 4px; }
.pitch li + li { margin-top: 2px; }
.pitch li::marker { color: var(--g2); font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 30px; }
.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  padding: 10px 16px 11px; text-decoration: none; font-weight: var(--w-med); line-height: 1.2;
}
.btn:hover { background: #333; }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { color: var(--g1); }

/* ---------- footnotes: click or tap, a small popover opens over the next line ---------- */
.fn { position: relative; }
.mk {
  position: relative; font: var(--w-mono) 10.5px/1 var(--mono); color: var(--accent);
  padding: 1px 2px; vertical-align: super; letter-spacing: 0;
}
.statement .mk { font-size: 11.5px; vertical-align: .95em; }
.mk::after { content: ""; position: absolute; inset: -10px -8px; }
.mk:hover { text-decoration: underline; text-underline-offset: 2px; }
.mk[aria-expanded="true"] { background: var(--accent); color: #fff; text-decoration: none; }
.pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: -4px;
  width: 290px; max-width: calc(100vw - 2 * var(--m));
  background: var(--paper); border: 1px solid var(--ink); padding: 9px 12px 11px;
  font: 400 var(--s1)/1.45 var(--sans); letter-spacing: 0; color: var(--ink); white-space: normal;
  display: block; text-align: left;
}
.pop .pn { display: block; color: var(--accent); margin-bottom: 2px; }
.pop b { font-weight: var(--w-semi); }
@media (prefers-reduced-motion: no-preference) { .pop:not([hidden]) { animation: rise 120ms ease-out; } }
@keyframes rise { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---------- section heads: a hairline; the statement is the head ---------- */
.head { position: relative; grid-column: l / x; border-top: 1px solid var(--rule); height: 0; }
.head .hl, .head .hnote { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lede { padding-top: calc(var(--lede) + 18px); }

/* ---------- ledgers ---------- */
.ledger { width: 100%; border-collapse: collapse; margin-top: 34px; }
.ledger th, .ledger td { text-align: left; vertical-align: baseline; padding: 10px 16px 11px 0; border-top: 1px solid var(--rule); }
.ledger th { font-weight: 400; color: var(--g2); padding-top: 6px; padding-bottom: 7px; white-space: nowrap; }
.ledger tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.ledger tr > :last-child { padding-right: 0; }
.ledger .no { width: 44px; color: var(--g2); }
.ledger .k { font-weight: var(--w-semi); }
.ledger td.k { width: 168px; }
.ledger .r { text-align: right; }

/* ---------- the deck: one card at a time, on a thin stack ---------- */
.deal { margin-top: 26px; color: var(--g1); }
.deal button { color: var(--g2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.deal button:hover { color: var(--ink); text-decoration-color: var(--g2); }
.deal button[aria-pressed="true"] { color: var(--ink); text-decoration: none; cursor: default; }

.handwrap { margin-top: var(--inner); }
.one .table { position: relative; margin-bottom: 24px; }
.one .layer { position: absolute; inset: 0; background: var(--stock); border: 1px solid #d4d3ce; border-radius: 3px; }
.one .ocard {
  position: relative; z-index: 30; aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  padding: 14px 20px 15px; background: var(--stock); border: 1px solid #d4d3ce; border-radius: 3px;
}
.one .ocard.ghost { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.one .ctop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); color: var(--g1); }
.one .ctop .code { color: var(--ink); font-weight: var(--w-mono); }
.one .q { margin-top: 22px; font-size: var(--s2); line-height: var(--lh2); font-weight: var(--w-st); letter-spacing: var(--ls2); text-wrap: pretty; max-width: 21em; }
.one .cfoot { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; color: var(--g2); }
.one .ocard[data-answer="know"] .q { color: var(--g2); }
.one .ocard[data-answer="unsure"] { border-color: var(--ink); }
.one .answer { display: flex; align-items: center; gap: 10px; }
.one .ab { border: 1px solid var(--ink); padding: 9px 16px 10px; min-width: 112px; text-align: center; line-height: 1.2; font-weight: var(--w-med); }
.one .ab:hover { background: #f0f0ec; }
.one .ab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.one .ab[data-a=unsure][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.one .count { margin-left: auto; color: var(--g1); white-space: nowrap; }
.one .meta { display: flex; gap: 18px; align-items: baseline; margin-top: 14px; }
.one .tl { color: var(--g1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.one .tl:hover { color: var(--ink); }
.one .keys { margin-left: auto; color: var(--g2); }
@media (hover: none), (pointer: coarse) { .one .keys { display: none; } }

.hand-cap { margin-top: 10px; color: var(--g1); }
.hand-cap .mono { color: var(--g2); }

/* ---------- the read-out ledger ---------- */
.readout { margin-top: calc(var(--inner) + 6px); }
.readout .ledger { margin-top: 0; }
.tally .n { width: 80px; color: var(--g2); }
.tally .n.on { color: var(--accent); }
.tally td.k { width: auto; }
.tally .codes { width: 120px; color: var(--g1); word-spacing: .2em; }
.tally tfoot td { border-top: 1px solid var(--ink); color: var(--g1); }
.instr { margin-top: 14px; color: var(--g1); max-width: 34em; }
.verdict { margin-top: 18px; max-width: 34em; }
.verdict .therefore { display: inline-block; width: .8em; height: .8em; vertical-align: -.02em; margin-right: .45em; }
.verdict:empty { display: none; }
.readout .actions { margin-top: 22px; }

/* ---------- What HCI means: one statement, three rows, the figure in the right margin ---------- */
.surf3 { list-style: none; margin-top: 18px; border-bottom: 1px solid var(--rule); }
.surf3 li { display: grid; grid-template-columns: 92px 156px minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--rule); padding: 7px 0 8px; align-items: baseline; }
.surf3 b { font-weight: var(--w-semi); }
.surf3 .bt { color: var(--g2); }

.fig1 { width: 100%; max-width: 320px; margin-top: 18px; }
.fig1 svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.fig1 svg text { font-family: var(--sans); font-size: 14px; fill: var(--ink); }
.fig1 svg .edge { font-family: var(--mono); font-size: 11.5px; fill: var(--g1); letter-spacing: .02em; }
.fig1 svg .field { font-family: var(--mono); font-size: 12px; fill: var(--g2); letter-spacing: .08em; }
figcaption { margin-top: 10px; color: var(--g1); }
figcaption .mono { color: var(--g2); margin-right: 8px; }

/* ---------- Where we work ---------- */
.deal-row { color: var(--g1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule); white-space: nowrap; }
.deal-row:hover { color: var(--ink); text-decoration-color: var(--g2); }
.t4 .cards { width: 92px; }
.t4 .k a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.t4 .k a:hover { text-decoration-color: var(--ink); }
.t4 .k a[aria-current="page"] { text-decoration: none; }
.t4 .k .grey { font-weight: 400; }

/* ---------- industry pages: one line under the hero statement ---------- */
.for { margin-top: 28px; max-width: 34em; }

.demo { margin-top: calc(var(--inner) + 26px); }
.demo .cell {
  background: var(--cell); aspect-ratio: 16 / 10;
  padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; color: var(--g2);
}
.demo .cell > div { display: flex; justify-content: space-between; gap: 16px; }
.demo .cell .mono { white-space: nowrap; }

/* ---------- closing and footer ---------- */
.say h2 { display: inline; }
footer { color: var(--g2); }
.colo { border-top: 1px solid var(--ink); padding-top: 9px; padding-bottom: 16px; align-items: baseline; }
.cline { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; }
.pages { margin-left: auto; display: flex; gap: 10px; }
.cline .priv { color: inherit; text-decoration-color: var(--g3, #b4b4b0); }
.cline .priv:hover { color: var(--ink); }
.pages a { text-decoration: none; }
.pages a:hover { color: var(--ink); }

/* =====================================================================
   narrower screens: the right margin folds under the column
   ===================================================================== */
@media (max-width: 1199px) {
  :root { --rail: 150px; --gut: 32px; --m: 24px;
    --cols: [l] var(--rail) [lg] var(--gut) [t s] minmax(0, var(--col)) [g e] minmax(0, 1fr) [x]; }
  .row > .c-s { grid-row: auto !important; }
}

/* =====================================================================
   phone: one column for everything; the margin labels sit in the flow
   ===================================================================== */
@media (max-width: 760px) {
  :root { --m: 16px; --cols: [l t s] minmax(0, 1fr) [lg g e x]; --s1: 15.5px; --s2: 24px;
    --sec: 76px; --lede: 26px; --inner: 34px; --hero-b: 64px; }
  .row > * { grid-row: auto !important; }
  .top2 > .head { order: -1; }
  .mbar { padding: 14px var(--m) 0; }
  .wordmark { margin: 26px 0 24px; }
  .rail { position: static; width: auto; padding-top: 0; }
  .hero > .rail { padding-top: 0; margin-bottom: 14px; }
  .rh { position: static; display: flex; gap: 8px; }
  .rh .folio { margin: 0; }
  .top2 > .lede { padding-top: 14px; }
  .pitch ol { padding-left: 1.45em; }
  .actions { margin-top: 24px; }
  .ledger { margin-top: 26px; }
  .ledger .no { width: 34px; }
  .ledger th, .ledger td { padding-right: 10px; }
  .hide-s, .t4 .cards { display: none; }
  .ledger td.k { width: 112px; }
  .ledger th { white-space: normal; }
  .one .ocard { aspect-ratio: 4 / 3; padding: 12px 15px 13px; }
  .one .q { margin-top: 16px; }
  .one .ab { min-width: 0; flex: 1; padding-left: 8px; padding-right: 8px; }
  .one .count { flex: none; }
  .tally .codes { width: auto; }
  .fig1 { margin-top: 28px; }
  .surf3 li { grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; }
  .surf3 li > :last-child { grid-column: 1 / -1; }
  .demo .cell { aspect-ratio: 4 / 3; }
  .colo { grid-template-columns: minmax(0, 1fr); }
  .pages { margin-left: 0; }
}
@media (max-width: 360px) { nav.words { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }