/* ─────────────────────────────────────────────────────────────────────────
   RIVET — rivetcad.com, the company page.

   Same language as the PCB site ("Bone", assets/css/rivet.css there): ground
   #f5f6f8, ink near-black, ONE accent #ff9838 spent on the primary action and
   on almost nothing else. Display is Anybody, text is Archivo, and monospace
   appears only where the text is literally machine data.

   This page is not the product page. It is the argument: three disciplines,
   one model, and a verifier that can say "I did not check this."
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Anybody';
  src: url('../fonts/anybody.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 50% 150%; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}

:root {
  --bone:   #f5f6f8;
  --bone-2: #eceef2;
  --line:   #d9dce3;
  --ink:    #14161a;
  --ink-2:  #454a53;
  --ink-3:  #6b717c;
  --accent: #ff9838;
  --accent-ink: #7a3d00;
  --display: 'Anybody', 'Archivo', -apple-system, sans-serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: clamp(20px, 5vw, 64px);
  --col: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bone); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--col); margin: 0 auto; padding: 0 var(--pad); }

/* ── display type ─────────────────────────────────────────────────────── */
.d1, .d2, .d3, .brand, .label { font-family: var(--display); }
.d1 {
  font-size: clamp(42px, 7.2vw, 88px); line-height: 0.98;
  letter-spacing: -0.03em; font-weight: 760;
  font-variation-settings: 'wdth' 92; margin: 0;
}
.d2 {
  font-size: clamp(28px, 3.9vw, 46px); line-height: 1.06;
  letter-spacing: -0.022em; font-weight: 720;
  font-variation-settings: 'wdth' 94; margin: 0 0 18px;
}
.d3 {
  font-size: clamp(20px, 2.1vw, 25px); line-height: 1.2;
  letter-spacing: -0.015em; font-weight: 700; margin: 0 0 10px;
}
/* Decorative labels are SANS, tracking under .05em — never monospace. */
.label {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 14px;
}
p { margin: 0 0 18px; max-width: 62ch; color: var(--ink-2); }
p.lead { font-size: clamp(18px, 1.9vw, 21px); color: var(--ink); max-width: 54ch; }
strong { font-weight: 620; color: var(--ink); }
code, .mono { font-family: var(--mono); font-size: 0.88em; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 62px; }
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 780; font-size: 21px; letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 92;
}
.brand svg { width: 26px; height: auto; }
.nav a.n { text-decoration: none; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.nav a.n:hover { color: var(--ink); }
.nav .spacer { flex: 1; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 22px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .12s cubic-bezier(.2,.8,.3,1), background .12s, box-shadow .12s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 18px -8px rgba(255,152,56,.9);
}
.btn-primary:hover { background: #ffa452; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--bone-2); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 64px); }
.hero .d1 { max-width: 15ch; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.hero .under { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-3); max-width: 48ch; }

/* the honesty banner — the page says what it is before it sells anything */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: var(--bone-2);
  border-radius: 999px; padding: 6px 14px 6px 10px;
  font-size: 13.5px; font-weight: 550; color: var(--ink-2); margin: 0 0 26px;
}
.status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,152,56,.22);
}

/* ── sections ─────────────────────────────────────────────────────────── */
section { padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* row list, never a three-up feature grid */
.rows { border-top: 1px solid var(--line); margin: 26px 0 0; }
.row { display: grid; grid-template-columns: 190px 1fr; gap: 24px;
       padding: 22px 0; border-bottom: 1px solid var(--line); }
.row h4 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 700;
          letter-spacing: -0.012em; font-variation-settings: 'wdth' 94; }
.row p { margin: 0; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; gap: 6px; } }

/* ── figure ───────────────────────────────────────────────────────────── */
figure { margin: 0; }
.shot {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #0d0f12; box-shadow: 0 24px 60px -34px rgba(20,22,26,.55);
}
.shot img { width: 100%; height: auto; }
figcaption { margin: 12px 2px 0; font-size: 13.5px; color: var(--ink-3); }

/* ── status table: what is built and what is not ──────────────────────── */
.ledger { width: 100%; border-collapse: collapse; margin: 24px 0 0; font-size: 15.5px; }
.ledger th, .ledger td { text-align: left; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger th { font-weight: 600; color: var(--ink-3); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.ledger td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); }
.pill.on  { background: rgba(255,152,56,.16); border-color: rgba(255,152,56,.5); color: var(--accent-ink); }
.pill.off { background: var(--bone-2); color: var(--ink-3); }
.scroll-x { overflow-x: auto; }

/* ── pull quote ───────────────────────────────────────────────────────── */
blockquote {
  margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--accent);
  font-family: var(--display); font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.28; letter-spacing: -0.018em; font-weight: 620;
  font-variation-settings: 'wdth' 96; color: var(--ink);
}
blockquote p { color: inherit; max-width: 34ch; font-size: inherit; }

/* ── diagram ──────────────────────────────────────────────────────────── */
.diagram { width: 100%; height: auto; }
.diagram .box { fill: var(--bone); stroke: var(--ink); stroke-width: 1.5; }
.diagram .core { fill: var(--accent); stroke: none; }
.diagram .lnk { stroke: var(--ink-3); stroke-width: 1.5; }
.diagram .cut { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.diagram text { font-family: var(--sans); font-size: 13px; fill: var(--ink); font-weight: 600; }
.diagram text.q { fill: var(--ink-3); font-weight: 500; }

/* ── footer ───────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 40px 0 56px; }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
footer a:hover { color: var(--ink); }
footer .spacer { flex: 1; }
footer small { color: var(--ink-3); font-size: 13.5px; }