:root {
  --paper: #eeefec;
  --surface: #f7f7f5;
  --ink: #1c1e21;
  --muted: #5c5f63;
  --rule: #d8d9d4;
  --idle: #dfe0db;
  --accent: #7c5f25;
  --brass-light: #d1a85a;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(2.75rem, 5.5vw, 4rem);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.75rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap {
  width: min(100% - 2 * var(--gutter), 62rem);
  margin-inline: auto;
}

h1, h2, h3 { margin: 0; font-weight: 400; }

h2 {
  font-size: 1.0625rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

h3 { font-size: 1.0625rem; font-weight: 500; }

p { margin: 0; text-wrap: pretty; }

/* Header: a white bar floating over the page, set in from the edges; its shadow
   deepens once the page scrolls. */

/* The logo mark, painted in the text colour through the logo file. */
.mark {
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(assets/logo.svg) center / contain no-repeat;
  mask: url(assets/logo.svg) center / contain no-repeat;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: 0.75rem;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: min(100% - 2 * var(--gutter), 66rem);
  height: 4rem;
  padding-inline: 1.25rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(28 30 33 / 0.06), 0 10px 30px -14px rgb(28 30 33 / 0.3);
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled .nav { box-shadow: 0 1px 2px rgb(28 30 33 / 0.08), 0 14px 36px -12px rgb(28 30 33 / 0.4); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark .mark { width: 1.625rem; height: 1.625rem; }

.nav-links { display: flex; gap: 2.25rem; margin-left: auto; }

.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9375rem;
  transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--accent); }

.nav-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 0.55em;
}

.nav-cta {
  padding: 0.6rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.nav-cta:hover { background: var(--accent); }

/* Two bars that turn into a cross; only shown on small screens. */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease;
}

.open .menu-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
.open .menu-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Page titles: the big light headline that the inner pages open with. */

.hero { padding-block: clamp(3rem, 8vw, 5.5rem) var(--section); }

.hero h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 14ch;
}

.lede {
  margin-top: 1.75rem;
  max-width: var(--measure);
  font-size: 1.25rem;
  color: var(--muted);
}

/* Homepage: the page starts under the floating header, so the hero runs to the
   very top of the screen. */
.home .site-header { margin-bottom: -4.75rem; }

/* Homepage hero: full width and dark, one big centered line, and the GPU cluster
   running edge to edge underneath it. Brass is only the GPUs Tufra Labs fills. */

.hero-x {
  position: relative;
  padding-block: calc(4.75rem + clamp(2rem, 5vw, 3.5rem)) clamp(1.5rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.06) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #111214 0%, var(--ink) 100%);
  color: #fff;
  overflow: hidden;
}

.hero-x :focus-visible { outline-color: var(--brass-light); }

.hero-x-copy { text-align: center; }

.hero-x h1 {
  max-width: 13ch;
  margin: 0 auto;
  font-size: clamp(2.75rem, 7.2vw, 6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero-x .lede { max-width: 40rem; margin: 1.75rem auto 0; color: rgb(255 255 255 / 0.7); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.actions .button { margin-top: 0; }
.hero-x .actions { justify-content: center; margin-top: 2.25rem; }

/* The cluster: rows of GPUs across the whole screen, fading out at both sides
   as if it carries on past the edges. White is busy, brass is what Tufra Labs
   fills, dark is idle. The caption crossfades from before to after. */

.fleet { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }

.fleet-grid {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.fleet-grid.dragging { cursor: grabbing; }

/* Laid out column by column, so a whole column can be moved from one end to the other. */
.fleet-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  gap: 7px;
  width: max-content;
  will-change: transform;
}

.fleet-grid i {
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  background: #2a2d32;
  transition: background-color 0.35s ease;
}

.fleet-grid i.busy { background: #e6e6e1; }
.fleet-grid i.gained { background: var(--brass-light); }

/* A popped square: it changes colour at once, squashes, springs past its size
   and settles, while a ring in its new colour goes out from it and fades. */
.fleet-grid i.pop { animation: fleet-pop 0.35s ease-out; transition-duration: 0.08s; }

.fleet-grid i.pop::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--brass-light);
  border-radius: 4px;
  animation: fleet-ring 0.45s ease-out forwards;
  pointer-events: none;
}

.fleet-grid i.pop:not(.gained)::after { border-color: rgb(255 255 255 / 0.6); }

@keyframes fleet-pop {
  30% { transform: scale(0.75); }
  65% { transform: scale(1.15); }
}

@keyframes fleet-ring {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(2); }
}

.fleet figcaption {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 0.55);
}

/* The measured figure crossfades from stock to Tufra Labs as the cluster
   fills, with what it was measured on underneath. */
.fleet-figure { display: grid; font-size: 0.9375rem; color: #fff; }
.fleet-figure span { grid-area: 1 / 1; transition: opacity 0.6s ease; }
.fleet .after { opacity: 0; color: var(--brass-light); }
.fleet.done .before { opacity: 0; }
.fleet.done .after { opacity: 1; }
.fleet-note { display: block; margin-top: 0.35rem; text-wrap: balance; }

/* Sections open with a small brass label, then a real headline. Results and
   Use cases sit on the paper, with How it works on dark between them. */

.uses, .how, .results, .engage { padding-block: var(--section); }


/* Monospace for labels and numbers: the engineering voice. */
.eyebrow, .fleet figcaption, .step-num, .pane-head, .demo figcaption { font-family: var(--mono); }

.eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title { margin-bottom: clamp(2rem, 4vw, 3rem); }

.section-title h2 {
  margin: 0.6rem 0 0;
  max-width: 20ch;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.section-title .sub { margin-top: 0.9rem; max-width: var(--measure); color: var(--muted); }

/* With a legend on the right of the headline. */
.section-title.split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
}

/* Use cases: white cards. */

.legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.key { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.key.base { background: var(--muted); opacity: 0.45; }
.key.levi { background: var(--accent); margin-left: 0.75rem; }

.use-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.use { padding: clamp(1.5rem, 3vw, 2rem); background: #fff; border-radius: 8px; }

/* Each use case opens with a small illustrative chart: grey is before, brass is with LEVI. */
.viz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  margin-bottom: 1.75rem;
  overflow: visible;
}

.tokens span { display: block; height: 14px; }
.tokens .base { background: repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 16px); opacity: 0.45; }
.tokens .levi { background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 8px); }

svg.viz path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
svg.viz .base { stroke: var(--muted); stroke-width: 1.5; opacity: 0.45; }
svg.viz .levi { stroke: var(--accent); stroke-width: 2; }

/* The figures play as they scroll into view (the script sets .play). Tokens
   stream past for about five seconds, the brass row carrying twice as many in
   the same time; both loss curves draw left to right and hold. */
.use.play .tokens span { animation: stream 1.6s linear 3; }
@keyframes stream { to { background-position-x: 16px; } }

.uses.armed svg.viz { clip-path: inset(0 100% 0 0); }
.use.play svg.viz { animation: draw 3s ease-out forwards; }
@keyframes draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.meter span { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 14px; }
.meter i { background: var(--idle); border-radius: 1px; transition: background 0.3s ease; }
.meter .base i.on { background: var(--muted); opacity: 0.45; }
.meter .levi i.on { background: var(--accent); }

.use h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.use p { margin-top: 0.5rem; color: var(--muted); max-width: 22rem; }

/* How it works, on dark: three steps as cards, each with a line icon. */

.how { background: var(--ink); color: #fff; }
.how .eyebrow { color: var(--brass-light); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-card { padding: clamp(1.5rem, 3vw, 2rem); background: #25282c; border-radius: 12px; }

.step-icon { display: block; width: 56px; height: 56px; margin-bottom: 1.75rem; }
.step-icon * { fill: none; stroke: rgb(255 255 255 / 0.8); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step-icon .on { fill: var(--brass-light); stroke: var(--brass-light); }
.step-icon .hot { stroke: var(--brass-light); }
.step-icon .dim { stroke: rgb(255 255 255 / 0.45); }

.step-num { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--brass-light); }
.step-card h3 { margin-top: 0.5rem; font-size: 1.25rem; font-weight: 400; }
.step-card p:last-child { margin-top: 0.5rem; color: rgb(255 255 255 / 0.62); }

/* Results: one at a time, picked with tabs that underline the one showing,
   like the current page in the header. */

.result-tabs {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}

.result-tabs button {
  display: grid;
  gap: 0.1rem;
  margin-bottom: -1px;
  padding: 0 0 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.result-tabs button:hover { color: var(--ink); }
.result-tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab-name { font-weight: 500; }
.tab-what { font-size: 0.875rem; color: var(--muted); }

/* Each result: a number on the left and a demo on the right. */

.result {
  display: grid;
  grid-template-columns: 16.5rem 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.result[hidden] { display: none; }

.gain {
  margin-top: 0;
  font-size: clamp(3.5rem, 8vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* A unit set beside the big number, small enough to keep it on one line. */
.gain .unit { margin-left: 0.15em; font-size: 0.3em; font-weight: 400; letter-spacing: 0; }

.what { margin-top: 0.75rem; font-weight: 500; text-wrap: balance; }

.detail { margin-top: 0.5rem; color: var(--muted); text-wrap: pretty; }
.result .cost { color: var(--ink); font-weight: 500; }

/* A demo is a dark screen with two panes, before and with Tufra Labs, like the
   cluster in the hero: white for what was there, brass for what Tufra Labs adds. */

.demo {
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--ink);
  border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgb(28 30 33 / 0.6);
  color: #fff;
}

.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.pane {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #25282c;
  border-radius: 8px;
}

.pane.levi { box-shadow: inset 0 0 0 1px rgb(209 168 90 / 0.55); }

.pane-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.6);
}

/* When a pane is too narrow, the number drops under the label whole. */
.pane-head span { white-space: nowrap; }

.pane.levi .pane-head span:last-child { color: var(--brass-light); }

.demo figcaption { margin-top: 1rem; font-size: 0.875rem; line-height: 1.65; color: rgb(255 255 255 / 0.72); text-wrap: pretty; }

/* How each demo was measured. On a phone the notes fold away behind this button. */
.method-toggle { display: none; }

/* Fanar: the answer streams in over a hidden full copy, so the pane never jumps. */

.race-prompt {
  width: fit-content;
  margin: 0 0 0.9rem auto;
  padding: 0.4rem 0.8rem;
  background: #2c2f34;
  border-radius: 10px;
  font-size: 0.875rem;
}

.pane-body { display: grid; flex: 1; font-size: 0.8125rem; line-height: 1.55; color: rgb(255 255 255 / 0.85); }
.pane-body > * { grid-area: 1 / 1; }
.pane-body .ghost { visibility: hidden; }

.pane-foot {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.6);
  font-variant-numeric: tabular-nums;
}

.pane.levi .pane-foot { color: var(--brass-light); }

/* Qwen: one seat per concurrent user. */

.seats { display: grid; grid-template-columns: repeat(11, 1fr); gap: 7px; }

.seats i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #33363b;
  transition: background-color 0.3s ease;
}

.seats i.on { background: #e6e6e1; }
.seats i.gained { background: var(--brass-light); }

/* Research: the paper and the post as two ruled rows (what it is, the title
   and one line on it, the link), then who cites LEVI. */

.research-band { padding-block: var(--section); background: var(--surface); }

.research-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }

.research-list li {
  display: grid;
  grid-template-columns: 12rem 1fr auto;
  gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}

.research-list .entry-meta { flex-direction: column; gap: 0.1rem; }
.research-list .entry-meta > * + *::before { content: none; }

.research-list h3 { font-size: 1.25rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.research-list h3 a { text-decoration: none; }
.research-list h3 a:hover { text-decoration: underline 1px var(--accent); text-underline-offset: 0.15em; }
.research-list li p:not(.entry-meta) { margin-top: 0.4rem; max-width: 38rem; font-size: 0.9375rem; color: var(--muted); }
.research-list .more { margin-top: 0; white-space: nowrap; }

/* Who uses and cites LEVI, as a grid of logos. The files are trimmed to the
   mark itself; the thin, condensed wordmarks (Berkeley, Carnegie Mellon) and
   MIT's small type are set taller so every name reads at the same size. */
.cited p { font-size: 0.9375rem; color: var(--muted); }

.logos {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  gap: 1.25rem 2.5rem;
}

.logos img {
  height: 22px;
  width: auto;
}

.logos img[alt="UC Berkeley"], .logos img[alt="Carnegie Mellon University"] { height: 26px; }
.logos img[alt="MIT"] { height: 30px; }

/* Working with us, on dark like How it works: three steps from first message
   to a faster stack, as a timeline of numbered circles joined by a line, with
   the payment promise above. The last circle is filled brass: it's the outcome. */

.engage { background: var(--ink); color: #fff; }
.engage .eyebrow { color: var(--brass-light); }
.engage .promise { color: #fff; font-size: 1.125rem; font-weight: 500; }

.engage-steps {
  --dot: 2.75rem;
  --step-gap: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.engage-steps li { position: relative; }

.engage-steps .step-num {
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  font-size: 0.8125rem;
  color: #fff;
}

.engage-steps li:last-child .step-num { background: var(--brass-light); border-color: var(--brass-light); color: var(--ink); }

.engage-steps h3 { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 400; }
.engage-steps li p:last-child { margin-top: 0.35rem; color: rgb(255 255 255 / 0.62); }

/* The line from each circle to the next. */
.engage-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--dot) / 2);
  left: calc(var(--dot) + 0.75rem);
  right: calc(0.75rem - var(--step-gap));
  height: 1px;
  background: rgb(255 255 255 / 0.25);
}

/* Questions: the title on the left, and on the right each question as a row
   that opens in place, marked with a plus that turns into a minus. */

.faq { padding-block: var(--section); background: var(--surface); }

.faq .wrap {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 1rem clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.faq .section-title { margin-bottom: 0; }

.faq-list { border-top: 1px solid var(--rule); }

.faq-list details { border-bottom: 1px solid var(--rule); }

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.1rem;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+" / ""; font-family: var(--mono); color: var(--accent); }
.faq-list details[open] summary::after { content: "\2212" / ""; }
.faq-list summary:hover { color: var(--accent); }

.faq-list details p { padding-bottom: 1.25rem; max-width: 36rem; color: var(--muted); }

/* Sections fade up once as they come into view (the script adds .in). Without
   the script, or with reduced motion, everything simply shows. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

.button {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.85rem 1.5rem;
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
}

.button:hover { background: #ece6da; }

.button.ink { background: var(--ink); color: var(--paper); }
.button.ink:hover { background: var(--accent); }

/* Outline button, for dark backgrounds. */
.button.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); }
.button.ghost:hover { background: rgb(255 255 255 / 0.08); }

/* Not-found page: the hero's type, with room for the footer to sit low. */

.notfound { min-height: 62vh; }
.notfound .code { margin-bottom: 1rem; color: var(--accent); font-size: 0.9375rem; }
.notfound .button { margin-top: 2.25rem; }

/* Text links under entries: no icon, just a thin underline that turns brass on hover. */
.more {
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 500;
  text-decoration: underline 1px rgb(28 30 33 / 0.25);
  text-underline-offset: 0.35em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.more:hover { color: var(--accent); text-decoration-color: currentColor; }

/* A row of links under an entry: where to read it, where the code is. */
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.links .more { margin-top: 0; }

/* Inner pages: the hero's type for the page title, then entries on the
   lighter surface. */

.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem); }

.page-head h1 {
  max-width: none;
  font-size: clamp(2.25rem, 4.4vw, 3rem);
  letter-spacing: -0.02em;
}

.page-head .lede { margin-top: 0.75rem; font-size: 1.125rem; }

.entries { padding-block: var(--section); background: var(--surface); }

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.entry-meta .kind { color: var(--accent); font-weight: 500; }
.entry-meta > * + *::before { content: "\00B7"; margin-right: 0.6rem; }

/* Research: a white card per paper or post, all the same width. Each picture
   sits in a grey frame of the same shape, and the links are pinned to the
   bottom so they line up across the row. */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The coming-soon card is last in the page; it leads the row of three on a
   computer, and drops to the end once the cards stack. */
.card.upcoming { order: -1; }

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
}

.card-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
}

.card-cover img {
  box-shadow: 0 1px 3px rgb(28 30 33 / 0.12), 0 12px 24px -14px rgb(28 30 33 / 0.35);
  transition: translate 0.25s ease;
}

a.card-cover:hover img { translate: 0 -3px; }

/* A paper shows the top of its first page, running off the bottom of the frame. */
.card-cover.sheet { align-items: flex-start; padding-bottom: 0; }
.card-cover.sheet img { width: 100%; height: auto; border-radius: 2px 2px 0 0; }

/* A post shows a figure from it, whole, on white. */
.card-cover.figure img { max-height: 100%; width: auto; padding: 0.5rem 0.75rem; background: #fff; border-radius: 4px; }

/* Coming soon: the logo mark where the picture would be. */
.card-cover.soon .mark { width: 2.75rem; height: 2.75rem; color: var(--rule); }

.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }

.card-title {
  margin: 0.75rem 0 0;
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline 1px var(--accent); text-underline-offset: 0.15em; }

.card-text { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }

.card .links { margin-top: auto; padding-top: 1.25rem; }

/* Who uses and cites LEVI: the logos in one row under the cards. */
.cited-band { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cited-band .logos { grid-template-columns: repeat(6, max-content); justify-content: space-between; }

/* Six logos in a row need about 960px of page; below that, three to a row. */
@media (max-width: 1080px) {
  .cited-band .logos { grid-template-columns: repeat(3, max-content); justify-content: start; }
}

/* Privacy: plain text under small headings. */

.prose { max-width: 40rem; }
.prose h2 { margin: 2.5rem 0 0; font-size: 1.25rem; font-weight: 500; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 0.6rem; color: var(--muted); }

/* Team: a white card per person, with links to their profiles. */

.members { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

.member { padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; border-radius: 8px; }

.member img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }

.member h2 {
  margin: 1.25rem 0 0;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.member-email {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: none;
}

.member-email:hover { text-decoration: underline 1px; text-underline-offset: 0.3em; }

.member p { margin-top: 0.75rem; max-width: 26rem; color: var(--muted); }

.member .member-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.25rem; color: var(--ink); }
.member-links .more { margin-top: 0; }


/* Footer: the contact call and the site links in one dark block. */

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5rem) 2.25rem;
  background: var(--ink);
  color: rgb(255 255 255 / 0.6);
  font-size: 0.9375rem;
}

.site-footer a:not(.button) { text-decoration: none; transition: color 0.2s ease; }
.site-footer a:not(.button):hover { color: #fff; }

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  column-gap: clamp(2.5rem, 6vw, 5rem);
  row-gap: 2.5rem;
}

.footer-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.footer-cta p { margin-top: 0.75rem; max-width: 22rem; }

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}

.footer-actions .button { margin-top: 0; }

.footer-email { font-size: 0.9375rem; }

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.footer-label {
  margin-bottom: 0.35rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.5);
}

.footer-base .wordmark { color: #fff; font-size: 1.0625rem; }
.footer-base .mark { width: 1.375rem; height: 1.375rem; }

@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card.upcoming { order: 0; }
}

/* Header collapses to a menu button before the links run out of room. */

@media (max-width: 820px) {
  .nav { width: calc(100% - 1.5rem); gap: 0.75rem; padding-inline: 1rem 0.75rem; }
  .nav-cta { margin-left: auto; }
  .menu-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(28 30 33 / 0.06), 0 18px 40px -16px rgb(28 30 33 / 0.4);
  }
  .site-header.open .nav-links { display: flex; }
  .nav-links a { padding-block: 0.75rem; font-size: 1.125rem; }
}

/* Phones: built for the screen rather than shrunk from the desktop. The header
   is a slim bar across the top, like an app's; type steps down; and each
   section keeps what reads at a glance. The demos' notes fold away, How it
   works is one grouped list, and the use cases swipe sideways. */

@media (max-width: 720px) {
  html { scroll-padding-top: 4.5rem; }
  body { font-size: 1rem; line-height: 1.55; }

  .site-header { padding-top: 0; }
  .home .site-header { margin-bottom: -3.5rem; }
  .nav { width: 100%; height: 3.5rem; padding-inline: var(--gutter); border-radius: 0; box-shadow: 0 1px 0 rgb(28 30 33 / 0.08); }
  .site-header.scrolled .nav { box-shadow: 0 1px 0 rgb(28 30 33 / 0.08), 0 12px 24px -18px rgb(28 30 33 / 0.45); }
  .nav-cta { padding: 0.5rem 0.9rem; font-size: 0.875rem; }
  .nav-links { top: 100%; padding: 0 var(--gutter) 0.5rem; border-top: 1px solid var(--rule); border-radius: 0 0 14px 14px; }
  .nav-links a { padding-block: 0.85rem; }
  .nav-links a + a { border-top: 1px solid var(--rule); }

  .section-title { margin-bottom: 1.75rem; }
  .section-title h2 { font-size: 1.875rem; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
  .section-title .sub { margin-top: 0.75rem; font-size: 0.9375rem; }

  .button { padding-inline: 1.25rem; }
  .hero-x { padding-top: 5.75rem; }
  .hero-x .lede { margin-top: 1.25rem; font-size: 1.0625rem; }
  .hero-x .actions { margin-top: 1.75rem; }
  .fleet { margin-top: 2.25rem; }

  /* Results: the number, the cost and the demo. The demo shows the before and
     after, so the sentence repeating them goes. */
  .result-tabs { gap: 1rem; margin-bottom: 1.5rem; }
  .result-tabs button { flex: 1; }
  .result { grid-template-columns: 1fr; gap: 1.5rem; }
  .what { margin-top: 0.6rem; }
  .result .detail:not(.cost) { display: none; }
  .result .cost { margin-top: 0.4rem; font-size: 0.9375rem; }
  .pane { padding: 0.75rem; }
  .pane-head { margin-bottom: 0.6rem; font-size: 0.75rem; }
  .pane-foot { margin-top: 0.6rem; font-size: 0.75rem; }
  .seats { gap: 4px; }

  /* Fanar: the panes stack, each a few lines tall, and follow the newest line
     as the answer streams in, like a chat. */
  .race-prompt { margin-bottom: 0.75rem; font-size: 0.8125rem; }
  .race .panes { grid-template-columns: 1fr; gap: 0.625rem; }
  .race .pane-body { flex: none; height: calc(4 * 1.55em); overflow: hidden; }
  .race .pane-body .ghost { display: none; }
  .race .pane-body.scrolled { -webkit-mask-image: linear-gradient(transparent, #000 1.5em); mask-image: linear-gradient(transparent, #000 1.5em); }

  .demo figcaption { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.8125rem; }
  .js .method-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .method-toggle::after { content: "+" / ""; color: var(--brass-light); }
  .method.open .method-toggle::after { content: "\2212" / ""; }
  .js .method-text { display: block; margin-top: 0.5rem; }
  .js .method:not(.open) .method-text { display: none; }

  /* How it works: one dark panel of three rows, icon on the left, with a
     hairline between rows that starts where the text does. */
  .steps { grid-template-columns: 1fr; gap: 0; background: #25282c; border-radius: 12px; }
  .step-card { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; padding: 1.25rem; background: none; border-radius: 0; }
  .step-card + .step-card { background: linear-gradient(rgb(255 255 255 / 0.1) 0 0) top right / calc(100% - 4.75rem) 1px no-repeat; }
  .step-card > :not(.step-icon) { grid-column: 2; }
  .step-icon { grid-row: 1 / span 3; width: 2.5rem; height: 2.5rem; margin: 0.25rem 0 0; }
  .step-icon * { stroke-width: 2; }
  .step-card h3 { margin-top: 0.2rem; font-size: 1.125rem; }
  .step-card p:last-child { margin-top: 0.25rem; font-size: 0.9375rem; }
  .js .steps .reveal { transform: none; }

  /* Use cases: cards that swipe sideways, the next one peeking in. */
  .use-list {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .use-list::-webkit-scrollbar { display: none; }
  .use { flex: 0 0 80%; padding: 1.25rem; scroll-snap-align: start; }
  .js .use-list .reveal { transform: none; }
  .viz { margin-bottom: 1.25rem; }
  .use h3 { font-size: 1.25rem; }
  .use p { font-size: 0.9375rem; }

  /* Research: what it is, the title and where to read it. */
  .research-list li { grid-template-columns: 1fr; gap: 0.35rem; padding-block: 1.25rem; }
  .research-list .entry-meta { flex-direction: row; gap: 0.25rem 0.6rem; }
  .research-list .entry-meta > * + *::before { content: "\00B7"; }
  .research-list h3 { font-size: 1.125rem; line-height: 1.35; }
  .research-list li p:not(.entry-meta) { display: none; }
  .research-list .more { margin-top: 0.25rem; font-size: 0.9375rem; }

  .logos { grid-template-columns: repeat(2, max-content); gap: 1.25rem 2rem; }
  .logos img { height: 19px; }
  .logos img[alt="UC Berkeley"], .logos img[alt="Carnegie Mellon University"] { height: 22px; }
  .logos img[alt="MIT"] { height: 26px; }
  .cited-band .logos { grid-template-columns: repeat(2, max-content); }

  .engage-steps { grid-template-columns: 1fr; --step-gap: 1.75rem; }
  .engage-steps li { display: grid; grid-template-columns: var(--dot) 1fr; column-gap: 1rem; }
  .engage-steps .step-num { grid-row: span 2; }
  .engage-steps h3 { margin-top: 0.5rem; font-size: 1.125rem; }
  .engage-steps li p:last-child { font-size: 0.9375rem; }
  .engage-steps li:not(:last-child)::after { top: calc(var(--dot) + 0.5rem); bottom: calc(0.5rem - var(--step-gap)); left: calc(var(--dot) / 2); right: auto; width: 1px; height: auto; }
  .engage .promise { font-size: 1.0625rem; }

  .faq .wrap { grid-template-columns: 1fr; }
  .faq-list summary { padding-block: 1rem; font-size: 1.0625rem; }
  .faq-list details p { font-size: 0.9375rem; }

  /* Inner pages: a smaller lede and card titles, and each person on the Team
     page as a contact card, photo beside the name. */
  .page-head .lede { font-size: 1.0625rem; }
  .cards { grid-template-columns: 1fr; }
  .card-body { padding: 1.25rem; }
  .card-title { font-size: 1.25rem; }
  .members { grid-template-columns: 1fr; }
  .member { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1rem; padding: 1.25rem; }
  .member img { grid-row: span 2; width: 4.5rem; height: 4.5rem; }
  .member h2 { align-self: end; margin-top: 0; font-size: 1.25rem; }
  .member-email { align-self: start; margin-top: 0.1rem; font-size: 0.875rem; }
  .member p { grid-column: 1 / -1; margin-top: 1rem; font-size: 0.9375rem; }
  .member .member-links { margin-top: 1rem; }

  /* Footer: the call to action, then the three link lists side by side. */
  .site-footer { padding-top: 3rem; }
  .footer-main { grid-template-columns: repeat(3, 1fr); column-gap: 1rem; row-gap: 2.5rem; }
  .footer-cta { grid-column: 1 / -1; }
  .footer-col { gap: 0.5rem; font-size: 0.875rem; }
  .footer-label { font-size: 0.75rem; }
  .footer-base { margin-top: 2.75rem; }
}

/* Narrow phones: a smaller wordmark keeps the header on one line, and on the
   narrowest the button gives way to the menu. */

@media (max-width: 400px) {
  .nav { gap: 0.625rem; }
  .nav .wordmark { gap: 0.5rem; font-size: 1.125rem; }
  .nav .mark { width: 1.375rem; height: 1.375rem; }
}

@media (max-width: 340px) {
  .nav-cta { display: none; }
  .menu-toggle { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fleet-grid i, .fleet figcaption span { transition: none; }
  .fleet-grid i.pop { animation: none; }
  .fleet-grid i.pop::after { content: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .tokens span, svg.viz { animation: none; }
}

/* With reduced motion the Fanar answer doesn't stream, so on a phone each short
   pane shows its opening lines and fades out at the bottom. */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .race .pane-body { -webkit-mask-image: linear-gradient(#000 calc(100% - 1.5em), transparent); mask-image: linear-gradient(#000 calc(100% - 1.5em), transparent); }
}