/* ============================================================================
   benchmarkai.investments — one stylesheet, five parts. (v2, 2026-08-29)

   v1 ported the deck's exhibit grammar (ruled registers, side-field columns)
   and the founder rejected it: "a condensed version of the slides instead of
   a website." v2 is a continuous reading experience: one column, one idea per
   screenful, the plate as the site's single big visual, and the mono voice
   rationed to stamps, instrument lines, and the legal record.

   1. TOKENS AND FACES — unchanged identity: one accent, one ground, one ink,
      five self-hosted woff2 faces. The arrows face stays declared as two
      STATIC weights after the base Mulish faces (Chromium range-face trap).
   2. THE SHELL — a single-column band grid, the masthead (hairline, never
      the deck's 3px accent bar), and the merged dark colophon that now
      carries contact, the doc index, and the notes apparatus.
   3. THE MOVEMENTS — home-page bands, the statement voice, the instrument
      lines, the one button object, and THE PLATE carried rule-for-rule
      (its mount re-derives the grid wider via --main-w; figure bytes are
      test-pinned and untouched).
   4. THE LETTER + LEGAL PAGES — the letter's own approved apparatus
      (run-in marks, lede, standfirst, rules, signature) and the plain
      legal documents.
   5. PRINT AND MOTION SAFETY — finished ink; paint-only transitions,
      all resolved under reduced motion.

   THE THREE VOICES
     Cormorant  — voice. Statements, the plate's title, the pull-quote,
                  the signature, "By introduction."
     Mulish     — argument. Every sentence of running prose, one measure.
     JetBrains  — record. Stamps, instrument lines, values, axes, legal.
                  Never a sentence of prose.

   VOICE RATIONING (structural, per founder feedback): at most one stamp per
   movement; at most three type voices per viewport; no ruled-row registers
   anywhere on web surfaces.
   ============================================================================ */

:root {
  color-scheme: only light;
  --accent: #16585c;
  --signal: #3f8f8f;
  --paper: #fcf9f3;
  --paper-warm: #f6f1e7;
  --ink: #1c1a16;
  --ink-soft: #5c574c;
  --ink-faint: #8a8578;
  --ink-quiet: #6e6a5e;
  --line: #e8e2d4;
  --dark: #14141a;
  --dark-paper: #eeece6;
  --dark-soft: #c2bcb1;
  --dark-accent: #5facb0;
  --dark-edge: #2c2b31;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Mulish", -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-600.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/mulish-400.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/mulish-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
/* Mulish has no arrow glyphs; this in-house face supplies U+2190/U+2192 at
   Mulish's own metrics. Two STATIC weights on purpose — a range face forms
   its own matching group in Chromium and knocks every non-arrow character
   into the platform fallback. */
@font-face {
  font-family: "Mulish";
  font-weight: 400;
  font-display: swap;
  unicode-range: U+2190, U+2192;
  src: url("/fonts/benchmarkai-arrows.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-weight: 600;
  font-display: swap;
  unicode-range: U+2190, U+2192;
  src: url("/fonts/benchmarkai-arrows.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

:root {
  --pad: clamp(18px, 3.2vw, 46px);
  --edge: clamp(18px, 5vw, 96px);

  /* ONE stepped scale; the prose measure derives from the body size alone. */
  --body: clamp(1rem, 0.9rem + 0.36vw, 1.1625rem);   /* 16 → 18.6 */
  --lh: 1.52;
  --flow: calc(var(--lh) * var(--body));
  --para: calc(var(--flow) * 0.75);
  --entry: var(--flow);
  --text-w: calc(var(--body) * 31.6);

  /* The single content column. Wider than the prose measure so statements
     and the instrument lines can set at their own widths; every paragraph
     still caps itself at --text-w. The plate's band re-declares --main-w
     wider and the whole grid re-derives (see THE PLATE). */
  --main-w: 46rem;
  --gutter: max(var(--edge), calc((100% - var(--main-w)) / 2));
  --cols:
    [bleed-start] var(--gutter)
    [main-start]  minmax(0, var(--main-w))
    [main-end]    var(--gutter)
    [bleed-end];

  /* THE SERIF REGISTER, RANKED. --statement is new in v2: the voice of the
     one proof sentence and the movement heads — between body and nameplate. */
  --signature:  clamp(1.9375rem, 1.3rem  + 1.60vw, 2.6875rem);  /* 31 → 43 */
  --lede:       clamp(1.4375rem, 1.02rem + 1.30vw, 2.1875rem);  /* 23 → 35 */
  --f-head:     clamp(1.5rem,    1.02rem + 1.05vw, 1.9375rem);  /* 24 → 31 */
  --serif-3:    clamp(1.25rem,   0.92rem + 0.86vw, 1.6875rem);  /* 20 → 27 */
  --standfirst: clamp(1.1875rem, 0.85rem + 0.75vw, 1.5rem);     /* 19 → 24 */
  --statement:  clamp(1.625rem,  1.05rem + 1.55vw, 2.625rem);   /* 26 → 42 */
  --hero-h1:    clamp(2.125rem,  1.30rem + 3.20vw, 4.5rem);     /* 34 → 72 */

  --mono-l:  clamp(0.875rem, 0.72rem + 0.22vw, 0.9125rem);      /* 14 → 14.6 */
  --mono-s:  0.78125rem;                                        /* 12.5 */
  --mono-xs: 0.6875rem;                                         /* 11 */
  --ls: 0.12em;

  --ink-dark:   color-mix(in srgb, var(--paper) 78%, var(--dark));
  --ink-dark-2: color-mix(in srgb, var(--paper) 60%, var(--dark));
  --accent-lift: color-mix(in srgb, var(--accent) 40%, var(--paper));
  --tick: color-mix(in srgb, var(--accent) 44%, transparent);

  /* Paint-only transitions: pointers and fragment targets, nothing arrives. */
  --e-paint: 160ms cubic-bezier(0.17, 0.55, 0.55, 1);
  --e-micro: 150ms ease-out;
  --e-state: 250ms ease-out;
  --e-draw: 400ms ease-out;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--body)/var(--lh) var(--sans);
  overflow-x: clip;
}

/* ==========================================================================
   2. THE SHELL
   ========================================================================== */

.band {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: var(--cols);
}
.band > * { grid-column: main-start / main-end; min-width: 0; }

/* separators kept in the source so the sentence set is untouched */
.mid { display: inline-block; width: 0; height: 0; overflow: hidden; vertical-align: baseline; }
.nb { white-space: nowrap; }
.sep { color: var(--accent); }

/* prose never exceeds its measure, whatever column it sits in */
.band p { max-width: var(--text-w); text-wrap: pretty; }

/* --------------------------------------------------------- masthead + nav -- */
/* A hairline shelf, never the deck's 3px accent bar. On the nameplate it is
   borderless ink and reads as the hero's first line. */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(14px, 1.6vw, 22px);
}
.masthead > .shelf { grid-column: main-start / main-end; }
.shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 26px;
}
.wordmark { line-height: 0; }
.wordmark a { display: inline-block; padding-block: 6px; }
.wordmark img { width: clamp(9.5rem, 14vw, 12rem); height: auto; }
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(14px, 2vw, 30px);
  font: 400 var(--mono-xs)/1.5 var(--mono);
  letter-spacing: var(--ls);
  text-transform: uppercase;
}
.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 12px;
  transition: color var(--e-paint);
}
.nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
  text-decoration-color: var(--accent);
}
.masthead--dark {
  background: var(--dark);
  border-bottom: 0;
}
.masthead--dark .nav a { color: var(--dark-soft); }
.masthead--dark .nav a[aria-current="page"] { color: var(--dark-accent); text-decoration-color: var(--dark-accent); }

/* ------------------------------------------------------------- stamps -- */
.stamp {
  font: 400 var(--mono-xs)/1.45 var(--mono);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--accent);
}
.stamp::before {
  content: "";
  display: block;
  width: 20px;
  border-top: 1px solid var(--accent);
  margin-bottom: 7px;
}
.stamp--series {
  font-size: var(--mono-s);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: 0.07em;
}

/* in-page text links. The note-reference apparatus (daggers, then the lone
   entity asterisk) retired fully 2026-08-30 (founder) — the notes stand as
   flush plain paragraphs, so nothing links into the notes block. */
.band a:not(.object):not(.doc-link):not(.nav a) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transition: text-decoration-color var(--e-paint), text-underline-offset var(--e-paint);
}

/* --------------------------------------------- the one interactive object -- */
/* The site's single button grammar: a 1px box in the current ink, mono,
   uppercase. Used exactly twice — the letter hand-off and the colophon mailto. */
.object {
  display: inline-block;
  font: 400 var(--mono-s)/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 15px 22px;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color var(--e-micro), color var(--e-micro), border-color var(--e-micro);
}
.object:focus-visible { background: var(--accent); color: var(--paper); border-color: var(--accent); }
footer .object:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ------------------------------------------------------------ the colophon -- */
/* Contact, the document index, and the notes apparatus share one dark close. */
footer.band {
  background: var(--dark);
  color: var(--ink-dark);
  padding-block: clamp(56px, 8vw, 110px) clamp(30px, 4vw, 52px);
  font-size: 0.875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.docs {
  margin-top: clamp(34px, 4vw, 56px);
  max-width: var(--text-w);
  list-style: none;
}
.doc-link {
  display: inline-block;
  padding-block: 10px;
  margin-right: clamp(18px, 2.4vw, 34px);
  font: 400 var(--mono-s)/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-soft);
  text-decoration: none;
  transition: color var(--e-paint);
}
.doc-link .arr { font-family: var(--sans); }   /* the arrows face covers U+2192 */
.doc-link:focus-visible { color: var(--dark-paper); }
.notes-block { margin-top: clamp(40px, 5vw, 72px); }
.note {
  max-width: 29.2em;
  text-wrap: pretty;
}
.note + .note { margin-top: 11px; }
.trademark {
  margin-top: clamp(18px, 2vw, 26px);
  max-width: 40em;
  font: 400 var(--mono-xs)/1.7 var(--mono);
  letter-spacing: 0.03em;
  color: var(--ink-dark-2);
}
.colophon {
  margin-top: clamp(20px, 2vw, 28px);
  padding-top: 15px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font: 400 var(--mono-xs)/1.85 var(--mono);
  letter-spacing: 0.05em;
  color: var(--ink-dark-2);
  max-width: 40em;
}
.colophon .sep { color: var(--accent-lift); }
footer .legal a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--e-paint), text-decoration-color var(--e-paint), text-underline-offset var(--e-paint);
  padding-block: 12px;
}
footer .legal a:focus-visible {
  color: var(--paper);
  text-decoration-color: currentColor;
  text-underline-offset: 0.30em;
}

/* ------------------------------------------------- focus / selection / tap -- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
footer :focus-visible,
.masthead--dark :focus-visible,
.hero :focus-visible { outline-color: var(--paper); }
::selection { background: var(--accent); color: var(--paper); }
footer ::selection, .hero ::selection { background: var(--paper); color: var(--ink); }
a, button { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ==========================================================================
   3. THE MOVEMENTS (home page)
   ========================================================================== */

/* One idea per screenful: each movement is a near-viewport band with its
   content vertically centered. vh first, svh where supported (iOS toolbars). */
.movement {
  min-height: 78vh;
  min-height: 82svh;
  align-content: center;
  padding-block: clamp(64px, 9vw, 140px);
}

/* --------------------------------------------------------- the nameplate -- */
.hero {
  background: var(--dark);
  color: var(--dark-paper);
  min-height: calc(92vh - 90px);
  min-height: calc(100svh - 90px);
  align-content: center;
  padding-block: clamp(56px, 8vw, 120px);
  -webkit-font-smoothing: antialiased;
}
.hero h1 {
  margin-top: clamp(20px, 3vw, 40px);
  font: 600 var(--hero-h1)/1.05 var(--serif);
  letter-spacing: -0.014em;
  max-width: 13.5em;
  text-wrap: balance;
  /* THE NEUTRAL HIERARCHY (founder 2026-08-29, ink/cream direction): a
     two-step value ramp, no hue in the headline. The observation sets one
     step down in the warm soft-grey; the claim answers in the brightest
     cream, in the italic voice. */
  color: var(--dark-soft);
}
.hero h1 em { font-style: italic; color: var(--paper); }
.hero .hero-status {
  margin-top: clamp(30px, 5vw, 64px);
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid var(--dark-edge);
  font: 400 var(--mono-xs)/1.55 var(--mono);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--dark-soft);
}

/* --------------------------------------------------------- the statements -- */
.statement {
  font: 600 var(--statement)/1.22 var(--serif);
  letter-spacing: -0.008em;
  max-width: 21em;
  text-wrap: balance;
}
.statement + p { margin-top: calc(var(--flow) * 1.2); }
.movement .stamp { margin-bottom: clamp(18px, 2.4vw, 30px); }

/* ----------------------------------------------------- instrument lines -- */
/* The method's entire panel: two quiet mono lines behind one hairline. */
.instrument {
  margin-block: calc(var(--flow) * 1.4);
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid var(--tick);
  font: 400 var(--mono-s)/2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.instrument > span { display: block; }

/* ------------------------------------------------------- the pull-quote -- */
.pull {
  font: 600 var(--statement)/1.24 var(--serif);
  letter-spacing: -0.008em;
  max-width: 23em;
  text-wrap: pretty;
}
.attribution {
  margin-top: calc(var(--flow) * 0.9);
  font: 400 var(--mono-xs)/1.5 var(--mono);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hinge-object { margin-top: calc(var(--flow) * 1.6); }
.hinge-object .object { color: var(--ink); }

/* The record band (plate + rule book) retired with its markup
   (founder, 2026-08-29) — the mounting CSS lives in git history. */

/* ==========================================================================
   4. THE LETTER + LEGAL PAGES
   ========================================================================== */

.sheet { row-gap: var(--entry); padding-block: clamp(26px, 3vw, 44px) calc(var(--flow) * 1.4); }
.entry { position: relative; }
.entry > p + p { margin-top: var(--para); }

.lead {
  font: 600 var(--standfirst)/1.26 var(--serif);
  letter-spacing: -0.004em;
  max-width: 24em;
  text-wrap: pretty;
}
.entry > .lead + * { margin-top: calc(var(--flow) * 0.62); }
.lede {
  font: 600 var(--lede)/1.14 var(--serif);
  letter-spacing: -0.004em;
  text-wrap: balance;
}
.entry--open > .lede { margin-top: calc(var(--flow) * 0.3); }
/* the run-in mark (letter only) */
.mark {
  float: left;
  margin-right: 0.8em;
  font: 400 var(--body)/var(--lh) var(--sans);
  white-space: nowrap;
}
.mark .stamp-t {
  font: 400 var(--mono-xs)/1 var(--mono);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--accent);
}
.mark .stamp-t::before {
  content: "";
  display: inline-block;
  width: 16px;
  border-top: 1px solid var(--accent);
  vertical-align: 0.3em;
  margin-right: 0.7em;
}
@media (max-width: 400px) {
  .mark { margin-right: 0.5em; }
  .mark .stamp-t::before { width: 10px; margin-right: 0.45em; }
}
.mark--block { float: none; margin: 0 0 0.5em; display: block; }

.founder-head {
  font: 600 var(--f-head)/1.05 var(--serif);
  letter-spacing: -0.006em;
}
.founder-head::before {
  content: "";
  display: block;
  width: 34px;
  border-top: 2px solid var(--accent);
  margin-bottom: 12px;
}
.spread > p + * { margin-top: calc(var(--para) * 0.75); }

.rules { list-style: none; }
.rules li { padding-left: 1.35em; text-indent: -1.35em; }
.rules li + li { margin-top: 0.3em; }
.rules li::before { content: "–"; color: var(--accent); margin-right: 0.8em; }

.sign { margin-top: calc(var(--flow) * 1.1); }
.signature { font: 600 var(--signature)/1.04 var(--serif); margin-top: 0; }

.fig {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.004em;
  color: var(--ink);
  white-space: nowrap;
}

.band--warm { background: var(--paper-warm); }

main.legal { max-width: 720px; margin: 0 auto; padding-block: 48px; padding-inline: clamp(24px, 6vw, 72px); }
main.legal h1 { font: 600 30px/1.2 var(--serif); margin-bottom: 24px; }
main.legal h2 { font: 600 23px/1.3 var(--serif); margin: 24px 0 8px; }
main.legal p + p { margin-top: 10px; }
main.center {
  text-align: center; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: 48px;
}
main.center h1 { margin-top: 18px; }
main.center .wordmark img { width: 240px; }
main.legal a {
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  transition: color var(--e-paint), text-decoration-color var(--e-paint);
  display: inline-block; padding-block: 6px; margin-block: -6px;
}
main.legal a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }

/* ==========================================================================
   5. PRINT AND MOTION SAFETY
   ========================================================================== */

@media (hover: hover) {
  .nav a:hover { color: var(--accent); }
  .masthead--dark .nav a:hover { color: var(--dark-paper); }
  .object:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
  footer .object:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .doc-link:hover { color: var(--dark-paper); }
  footer .legal a:hover { color: var(--paper); text-decoration-color: currentColor; text-underline-offset: 0.30em; }
  .band a:not(.object):not(.doc-link):not(.nav a):hover { text-decoration-color: var(--accent); text-underline-offset: 0.36em; }
  main.legal a:hover { color: var(--accent); text-decoration-color: currentColor; }
}

/* THE SCROLL SETTLE. The page's one entrance behavior: as a movement's
   content enters, it settles the last 10px into place and lifts from a
   0.55 opacity floor — scroll-driven, pure CSS, zero JS. The contract from
   the letter site travels: nothing ever animates from 0, the default state
   is fully visible (unsupported browsers and print get finished ink), and
   reduced motion disables it wholesale. Linear along the scroll timeline —
   progress-mapped motion takes no easing and never overshoots. */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .movement > * {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 70%;
    }
  }
}
@keyframes settle {
  from { opacity: 0.55; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@page { margin: 16mm 15mm; }
@media print {
  .nav, .docs { display: none; }
  body, .hero, .masthead--dark, footer.band { background: #fff; color: #000; }
  /* the light wordmark SVG carries a hard-coded #eeece6 fill — on the
     print-whitened grounds it must resolve to ink like everything else */
  .masthead--dark .wordmark img, footer .wordmark img { filter: brightness(0); }
  .hero h1 em { color: #000; }
  .hero, .movement { min-height: 0; }
  .band, footer .legal { display: block; padding-inline: 0; }
  a { text-decoration: none; }
}