/* pointorigin.com, v6 (2026-11-05): the 4r3n51k console's "mono" system on a public page.
   A paper ground, ink and three greys, no colour anywhere; state and structure carried by
   weight, shape and words. The system sans for reading, the system mono for identifiers and
   data, JetBrains Mono for the mark and the rain alone. Square corners, one hairline per box,
   no shadows. Light or dark follows the system until the switch in the top bar is pressed.
   Tokens are the console's (4r3n51k web/src/styles/tokens.css); the type scale is larger
   because this is read at arm's length, not worked in. */

@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #ffffff; --paper2: #f5f5f5; --sel: #ebebeb; --line: #dcdcdc; --line2: #bcbcbc;
  --ink: #141414; --ink2: #4a4a4a; --mute: #8b8b8b;
  --selection: rgba(0, 0, 0, 0.12);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --mark: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs: 14.5px; --fs-small: 12.5px; --fs-mono: 12px; --lh: 1.5;
  --topbar: 44px; --measure: 68ch; --col: 1120px; --outline: 200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #121212; --paper2: #1b1b1b; --sel: #262626; --line: #2e2e2e; --line2: #474747;
    --ink: #ececec; --ink2: #b8b8b8; --mute: #7d7d7d; --selection: rgba(255, 255, 255, 0.18);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121212; --paper2: #1b1b1b; --sel: #262626; --line: #2e2e2e; --line2: #474747;
  --ink: #ececec; --ink2: #b8b8b8; --mute: #7d7d7d; --selection: rgba(255, 255, 255, 0.18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--fs)/var(--lh) var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--selection); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line2); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: var(--fs-mono); }
.mute { color: var(--mute); }
.ink2 { color: var(--ink2); }
.small { font-size: var(--fs-small); }
.ref { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--line2); padding: 0 4px; white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); vertical-align: middle; margin-right: 7px; }
.dot.hollow { background: transparent; border: 1px solid var(--ink); }
.btn { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line2); padding: 6px 12px; text-decoration: none; display: inline-block; line-height: 1.3; cursor: pointer; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { opacity: .9; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* the top bar, 44 px, as the console's */
.top { position: sticky; top: 0; z-index: 3; background: var(--paper); height: var(--topbar); display: flex; align-items: center; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.top .mark { font-family: var(--mark); font-weight: 700; letter-spacing: .06em; font-size: 13px; text-decoration: none; white-space: nowrap; }
.top nav { display: flex; gap: 14px; align-items: baseline; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a { color: var(--ink2); text-decoration: none; white-space: nowrap; font-size: 13.5px; }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.top .ground { margin-left: auto; display: flex; border: 1px solid var(--line2); }
.top .ground button { font: inherit; font-size: 12px; color: var(--ink2); border: 0; padding: 2px 9px; background: transparent; cursor: pointer; }
.top .ground button.on { background: var(--ink); color: var(--paper); }

/* the field on the home page: the gate, black, the name falling in white */
.gate { position: relative; background: #000; color: #fff; min-height: calc(100vh - var(--topbar)); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.gate canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: difference; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 640px 420px at 50% 50%, transparent 46%, #000 100%); mask-image: radial-gradient(ellipse 640px 420px at 50% 50%, transparent 46%, #000 100%); }
.gate .card { position: relative; width: min(760px, calc(100% - 40px)); display: grid; gap: 26px; justify-items: center; text-align: center; padding: 72px 0; }
/* the mark: the name set heavy in the mono face, ghosts rising above it and fading, as the gate's */
.gate .wordmark { width: min(540px, 100%); height: auto; display: block; }
.gate .wordmark text { font-family: var(--mark); font-weight: 800; font-size: 88px; fill: #fff; }
.gate h1 { font-size: clamp(32px, 5.4vw, 58px); font-weight: 600; line-height: 1.06; letter-spacing: -0.028em; }
.gate .lede { color: rgba(255, 255, 255, .78); max-width: 52ch; font-size: 16px; line-height: 1.5; }
.gate .actions { justify-content: center; }
.gate .btn { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .55); }
.gate .btn:hover { border-color: #fff; }
.gate .btn.primary { background: #fff; color: #000; border-color: #fff; }
.gate .foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, .55); }

/* a page head for every page but home: a band of the gate, the rain faint on the right */
.head { position: relative; background: #000; color: #fff; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.head canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: difference; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 50%, #000 80%); mask-image: linear-gradient(90deg, transparent 0, transparent 50%, #000 80%); }
.head .in { position: relative; max-width: var(--col); margin: 0 auto; padding: 64px 20px 48px; display: grid; gap: 14px; }
.head h1 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; }
.head h1.mark { font-family: var(--mark); font-weight: 800; letter-spacing: 0; font-size: clamp(34px, 6vw, 64px); }
.head .lede { color: rgba(255, 255, 255, .78); max-width: 60ch; font-size: 16px; }
.head .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: rgba(255, 255, 255, .55); font-size: var(--fs-small); }

/* figures: mono line drawings that show the mechanism, in the page's own ink */
.figwrap { overflow-x: auto; margin: 6px 0 4px; }
.fig { display: block; width: 100%; max-width: 860px; height: auto; color: var(--ink); }
.fig .box { fill: var(--paper2); stroke: var(--line2); stroke-width: 1; }
.fig .chip { fill: var(--paper); stroke: var(--line2); stroke-width: 1; }
.fig .t { fill: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600; }
.fig .cap { fill: var(--ink2); font-family: var(--mono); font-size: 11px; }
.fig .ar { stroke: var(--ink2); stroke-width: 1; fill: none; }
.fig .dash { stroke: var(--mute); stroke-width: 1; fill: none; stroke-dasharray: 4 3; }
.fig .stop { stroke: var(--ink); stroke-width: 2.5; }
.fig marker path { fill: var(--ink2); }

/* the document: an outline column and the text, as the console's record */
section.doc { border-bottom: 1px solid var(--line); }
section.doc:last-of-type { border-bottom: 0; }
section.doc > .in { max-width: var(--col); margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: var(--outline) minmax(0, 1fr); gap: 12px 40px; align-items: start; }
section.doc .label { font-family: var(--mono); font-size: 12.5px; color: var(--mute); padding-top: 5px; position: sticky; top: calc(var(--topbar) + 16px); }
section.doc .body { display: grid; gap: 14px; max-width: 820px; }
section.doc h2 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; scroll-margin-top: calc(var(--topbar) + 24px); }
section.doc h3 { font-size: 15px; font-weight: 600; }
section.doc p { max-width: var(--measure); color: var(--ink); }
section.doc p.ink2 { color: var(--ink2); }
section.doc ul.plain { padding-left: 1.2em; max-width: var(--measure); display: grid; gap: 6px; }

/* statements: the platform page says four things, large, and no more */
section.doc .big { display: grid; gap: 12px; padding: 12px 0 20px; }
section.doc .big h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.025em; line-height: 1.1; max-width: 18ch; }
section.doc .big p { font-size: 16px; color: var(--ink2); max-width: 52ch; }

/* rows: one hairline each, an optional identifier on the left, a note on the right */
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
.row:last-child { border-bottom: 1px solid var(--line); }
.row.tagged { grid-template-columns: 64px minmax(0, 1fr) auto; }
.row .tag { font-family: var(--mono); font-size: 11.5px; color: var(--ink2); padding-top: 3px; }
.row .t { font-weight: 600; }
.row .t a { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.row .t a:hover { text-decoration-color: var(--ink); }
.row .s { color: var(--ink2); max-width: var(--measure); margin-top: 3px; }
.row .go { color: var(--mute); font-size: var(--fs-small); white-space: nowrap; padding-top: 3px; text-align: right; }
.row .go a { text-decoration: none; }
a.row:hover .t { text-decoration: underline; }

/* steps: a sequence, so the numbers are earned */
.steps { display: grid; counter-reset: step; }
.steps > li { list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); counter-increment: step; }
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps > li::before { content: counter(step); font-family: var(--mono); font-size: var(--fs-mono); color: var(--mute); padding-top: 3px; }
.steps .t { font-weight: 600; }
.steps .s { color: var(--ink2); max-width: var(--measure); margin-top: 3px; }

/* properties, as the dossier's */
.props { display: grid; }
.props > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.props > div:last-child { border-bottom: 1px solid var(--line); }
.props dt { color: var(--mute); }
.props dd { color: var(--ink); }
.props dd.mono { font-size: 12.5px; }
.props dd.yes { font-weight: 600; }

/* the shape of a row on the record, shown once on the platform page */
.rec { border: 1px solid var(--line2); padding: 12px 14px; display: grid; gap: 8px; max-width: 720px; background: var(--paper2); }
.rec .line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.rec .cite { font-family: var(--mono); font-size: 11.5px; color: var(--ink2); line-height: 1.5; }
.rec .cite q { quotes: none; border-bottom: 1px solid var(--line2); }
.rec .by { color: var(--mute); font-size: var(--fs-small); }

/* a closing line with the two actions */
.cta { display: grid; gap: 14px; }
.cta p { max-width: var(--measure); }

/* the foot: the identifiers in mono */
footer.foot { border-top: 1px solid var(--line); }
footer.foot .in { max-width: var(--col); margin: 0 auto; padding: 28px 20px 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; font-size: var(--fs-small); color: var(--ink2); }
footer.foot .brand { font-family: var(--mark); font-weight: 700; letter-spacing: .06em; font-size: 12px; color: var(--ink); margin-bottom: 8px; }
footer.foot .ids { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; }
footer.foot nav { display: grid; gap: 4px; }
footer.foot a { text-decoration: none; }
footer.foot a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  /* the bar becomes two rows: the mark and the ground switch, then the nav scrolling sideways */
  .top { height: auto; flex-wrap: wrap; gap: 0 12px; padding: 0 14px; }
  .top .mark { height: var(--topbar); }
  .top .ground { margin-left: auto; }
  .top nav { flex-basis: 100%; order: 3; gap: 14px; padding: 0 0 10px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .top nav a { padding-right: 2px; }
  .gate .card { padding: 48px 0 64px; }
  .head .in { padding: 40px 14px 30px; }
  .head canvas { display: none; }
  .fig { min-width: 640px; }
  .figwrap { margin-right: -14px; padding-right: 14px; }
  section.doc > .in { grid-template-columns: 1fr; gap: 6px; padding: 28px 14px; }
  section.doc .label { position: static; padding-top: 0; }
  .row.tagged { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .row .go { text-align: left; padding-top: 0; }
  .props > div { grid-template-columns: 1fr; gap: 2px; }
  footer.foot .in { grid-template-columns: 1fr; padding: 24px 14px 32px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }