@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/funnel-display-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/funnel-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inconsolata-latin.woff2') format('woff2');
}

/* Arcturel design language v1: paper and ink, one square cell, Funnel type.
   Funnel Display is the wordmark's face alone; every heading is Funnel Sans.
   Text pairs: ink on ground 16.9:1, muted on ground 6.2:1, muted on raised 6.5:1.
   There are no status colors: state is a shape and a word, or a word in weight.
   accent appears only as the last cell of a picture, always with an ink outline,
   because it is 3.2:1 on ground. */
:root {
  --ground: #F7F6F2;
  --raised: #FCFBF8;
  --line: #DCDBD5;
  --ink: #151515;
  --muted: #5B5C5C;
  --dim: #DCDBD5;
  --accent: #6F7DFF;
  --action: #151515;
  --on-action: #F7F6F2;
  --display: 'Funnel Display', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Inconsolata', ui-monospace, Menlo, monospace;
  color-scheme: light;
}

/* An output panel (CLI, terminal) is an island in v1's dark values, so a
   readout still reads as a terminal on paper. ink on its ground is 16.0:1,
   muted 7.7:1. */
.out {
  --ground: #151515;
  --raised: #1E1E1D;
  --line: #3A3A37;
  --ink: #F2F0EA;
  --muted: #A8A8A3;
  --dim: #2C2C2A;
  --accent: #8A96FF;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/26px var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:where(a, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--ground); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 0; left: 0; z-index: 10; width: auto; height: auto; margin: 0; padding: 14px 24px; clip: auto; overflow: visible; background: var(--action); color: var(--on-action); font: 600 15px/20px var(--sans); }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.measure { max-width: 65ch; }

/* Type scale, v1. display once per page. */
.t-display { font: 700 72px/76px var(--sans); letter-spacing: -.02em; }
.t-h1 { font: 700 48px/52px var(--sans); letter-spacing: -.01em; }
.t-h2 { font: 600 32px/36px var(--sans); letter-spacing: -.01em; }
.t-h3 { font: 600 22px/28px var(--sans); }
.t-small { font: 400 15px/22px var(--sans); }
.t-label { font: 400 13px/18px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.t-label.ink { color: var(--ink); }
.t-caption { font: 400 14px/20px var(--mono); letter-spacing: .02em; color: var(--muted); }
.t-caption.ink { color: var(--ink); }
.t-data { font: 400 15px/22px var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.strong { font-weight: 600; }

/* The wordmark is the name set in Funnel Display 700, Title case. No symbol exists. */
.wordmark { font: 700 26px/1 var(--display); letter-spacing: -.02em; text-decoration: none; color: var(--ink); }

.nav { border-bottom: 1px solid var(--line); background: var(--ground); }
.nav-inner { display: flex; gap: 32px; align-items: center; min-height: 72px; }
.nav-links { display: flex; gap: 24px; min-width: 0; overflow-x: auto; font: 400 15px/22px var(--sans); }
.nav-links a { text-decoration: none; color: var(--muted); white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { margin-left: auto; }

/* One primary action per screen, in action; every other button is a ghost
   with a muted border (6.2:1 on ground). Square corners. */
.btn { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 16px; border: 1px solid var(--muted); background: transparent; color: var(--ink); font: 600 16px/20px var(--sans); text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--line); }
.btn-primary { background: var(--action); color: var(--on-action); border-color: var(--action); }
.btn-primary:hover { background: var(--muted); border-color: var(--muted); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 15px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

section.block { padding-block: 72px; border-top: 1px solid var(--line); }
.sec-head { margin-bottom: 40px; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.copy { display: grid; gap: 20px; align-content: start; }

.hero { padding-block: 88px 72px; }
.hero-top { margin-bottom: 48px; display: grid; gap: 20px; }
.hero-top .t-display { max-width: 14em; }
.hero-sub { font: 400 19px/30px var(--sans); max-width: 36em; }

.certs { border-top: 1px solid var(--line); padding-block: 18px; font: 400 13px/18px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.certs .wrap { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.certs .lead { color: var(--ink); }

.statement { padding-block: 96px; border-top: 1px solid var(--line); }
.statement .t-h1 { max-width: 22em; }

figure { margin: 0; }
.fig { display: grid; gap: 10px; min-width: 0; }
.fig-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.panel { background: var(--raised); border: 1px solid var(--line); padding: 20px; min-width: 0; }
.out.panel { background: var(--ground); border-color: var(--ground); color: var(--ink); }
.mono { font: 400 15px/24px var(--mono); font-variant-numeric: tabular-nums; }
.row3 { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding-block: 6px; }
.row3 > :last-child { text-align: right; }
.final { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.term-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.term-print { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* State label (v1): a shape and a word, in ink. These shapes mean record state
   only; they never appear inside the baselines grid. */
.st { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.st::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--ink); flex: none; }
.st-ok::before { background: var(--ink); }

/* The picture of a version or record: OpenSSH's randomart walk over its
   SHA-256, in square cells. It helps a reader notice a change; the digest
   beside it is the proof. Never under 76px wide. */
.vp { display: block; width: 100%; height: auto; }
.vp-frame { fill: none; stroke: var(--line); stroke-width: .06; }
.vp-cells { fill: var(--ink); }
.vp-start { fill: none; stroke: var(--ink); stroke-width: .08; }
.vp-end { fill: var(--accent); stroke: var(--ink); stroke-width: .07; }
.pic { width: 96px; flex: none; }
.pic-sm { width: 76px; flex: none; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { display: grid; gap: 16px; align-content: start; padding: 24px; border: 1px solid var(--line); background: var(--raised); }
.card .panel { background: var(--ground); }
.points, .drawbacks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 15px/22px var(--sans); }
.points li, .drawbacks li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.points li::before { content: ""; width: 8px; height: 8px; background: var(--ink); margin-top: 7px; }
.drawbacks li::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--ink); margin-top: 7px; }
.rel { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--line); }
.rel:last-child { border-bottom: 0; }

.graph { width: 100%; height: auto; display: block; }
.graph-sm { display: none; width: 100%; max-width: 320px; height: auto; }
.g-box { fill: var(--raised); stroke: var(--muted); stroke-width: 1; }
.g-live { stroke: var(--ink); stroke-width: 2; }
.g-changed { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 3; }
.g-lost { fill: var(--raised); stroke: var(--ink); stroke-width: 2; }
.g-edge { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.g-ghost { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.g-break { fill: none; stroke: var(--ink); stroke-width: 2; }
.g-break-bg { fill: var(--raised); }
.g-t { font: 400 14px var(--mono); fill: var(--ink); }
.g-sub { font: 400 12px var(--mono); fill: var(--muted); }
.g-head { font: 400 11px var(--mono); letter-spacing: .08em; fill: var(--muted); }
.g-flag { font: 600 11px var(--mono); letter-spacing: .08em; fill: var(--ink); }
.drift { display: grid; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.drift div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }

.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 40px; }
.kind { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); }
.pr { border: 1px solid var(--line); background: var(--raised); }
.pr-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pr-body { padding: 8px 20px 20px; display: grid; }
.find { display: grid; grid-template-columns: 120px 64px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding-top: 14px; }
.note { padding: 4px 0 14px 196px; border-bottom: 1px solid var(--line); font: 400 15px/22px var(--sans); }
.pr-foot { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-top: 16px; }

/* The baselines grid (v1): one cell per control, 1 u cells on a 1.25 u pitch.
   Filled where the framework selects the control, a half-size dot where another
   framework relates, hollow where Rev. 5 withdrew it. A dot never fills a cell. */
.assay-fig { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: end; }
.bg { display: block; width: 100%; height: auto; }
.bg-on { fill: var(--ink); }
.bg-off { fill: var(--dim); }
.bg-don { fill: var(--ground); }
.bg-doff { fill: var(--muted); }
.bg-w rect { fill: none; stroke: var(--muted); stroke-width: .12; }
.ledger { display: grid; }
.ledger-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); font: 400 15px/22px var(--sans); }
.ledger-row .id { font: 400 15px/22px var(--mono); }
.ledger-total { padding-top: 12px; }
.grid-source { margin-top: 16px; }

.recs { display: grid; }
.rec { display: grid; grid-template-columns: 96px 80px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--line); }
.rec:first-child { padding-top: 0; }

.alts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.alt { display: grid; gap: 16px; align-content: start; }
.address { font: 400 17px/26px var(--mono); }

footer { border-top: 1px solid var(--ink); padding-block: 56px 40px; }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-col { display: grid; gap: 8px; align-content: start; font: 400 15px/22px var(--sans); }
.foot-col a { text-decoration: none; color: var(--muted); }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-col .wordmark { color: var(--ink); }
.tagline { font: 600 32px/36px var(--sans); letter-spacing: -.01em; margin-top: 16px; }
.foot-contact { margin-top: 16px; }
.foot-note { margin-top: 40px; max-width: 72ch; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }

.page-head { padding-block: 88px 40px; display: grid; gap: 20px; }
.page-body { padding-bottom: 96px; display: grid; gap: 20px; max-width: 65ch; }
.fw { display: grid; border-top: 1px solid var(--line); }
.fw-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--line); }

@media (max-width: 960px) {
  .two { grid-template-columns: 1fr; }
  .kinds { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
}

/* Below 820 the links drop to a second, full-bleed row: 44px tall,
   horizontally scrollable, no script. */
@media (max-width: 820px) {
  .nav-inner { flex-wrap: wrap; gap: 0 16px; }
  .nav-inner > .wordmark, .nav-inner > .nav-actions { min-height: 60px; display: inline-flex; align-items: center; }
  .nav-links {
    order: 3;
    flex-basis: calc(100% + 48px);
    margin: 0 -24px;
    padding: 0 0 0 24px;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-top: 1px solid var(--line);
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 11px 0; }
  .btn-sm { min-height: 44px; }
}

/* The row only scrolls once a link is actually hidden; above that a scroller
   would drag with nothing to reveal and eat vertical swipes. */
@media (max-width: 560px) {
  .nav-links { padding-right: 24px; touch-action: pan-x; overscroll-behavior: contain; }
}

@media (max-width: 760px) {
  .wrap { padding-inline: 16px; }
  .nav-links { flex-basis: calc(100% + 32px); margin: 0 -16px; padding-left: 16px; }
  .hero { padding-block: 56px 48px; }
  .t-display { font-size: 44px; line-height: 48px; }
  .t-h1 { font-size: 34px; line-height: 38px; }
  .t-h2 { font-size: 26px; line-height: 32px; }
  .hero-sub { font-size: 17px; line-height: 26px; }
  .cards, .alts { grid-template-columns: 1fr; }
  .assay-fig { grid-template-columns: 112px minmax(0, 1fr); gap: 20px; }
  .graph { display: none; }
  .graph-sm { display: block; }
  .find { grid-template-columns: 1fr auto; }
  .note { padding-left: 0; }
  .rec { grid-template-columns: 76px minmax(0, 1fr); }
  .rec > :nth-child(n+2) { grid-column: 2; }
  .row3 { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .fw-row { grid-template-columns: 1fr; gap: 6px; }
  .foot { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .row3, .ledger-row { grid-template-columns: 1fr; gap: 0; }
  .row3 > :last-child, .ledger-row > :last-child { text-align: left; }
  .pr-foot { grid-template-columns: 76px minmax(0, 1fr); }
}