/* Agent Cost Lens — draft 2. Plain CSS, no build step, no external requests.
   One face: Atkinson Hyperlegible Next, self-hosted.
   Draft 2 (his review): the backdrop IS the page's background. One painted field (art/field-*.webp) lies behind the
   whole page, far and still; living.js draws on it (behind the type, never under it). The product stands in front, on
   a soft paper mist down the middle of the field. Sections are separated by painted strokes of stone, clay, ink and
   moss, not by colored sheets. The paper grain over everything is the family's own (website_draft/style.css). */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2?v=sha_18b2a1a39a2f") format("woff2");
}

:root {
  --paper: #e3dbca; /* the field's quiet middle */
  --text: #221d16; /* every body line */
  --stone: #43331d; /* stone: hero name, "who" */
  --ink: #1f2b3d; /* ink: token cost, quickstart */
  --moss: #22381a; /* moss: how it works */
  --clay: #7a2f1d; /* clay: audit, and the button's fill below */
  --clay-fill: #6b3222;
  --clay-on: #f7e9d9;
  --ink-line: #13161c;

  --font: "Atkinson Hyperlegible Next", Verdana, sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --gutter: clamp(16px, 5vw, 72px);
  --pad-y: clamp(56px, 7vw, 112px);
  --measure: 25em; /* about 60 characters of this face per line, measured in shots/audit.json */
  --mist: 0.86; /* how much paper lies over the field down the middle, under the type */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.25rem; /* 20 px */
  font-weight: 400;
  line-height: 1.65;
  overflow-x: clip;
}

/* paper grain over everything: code-made noise, soft-light (the family's own) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.32;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- the field: the page's one background */
.field {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

/* the painted wash, far away, breathing very slowly */
.field::before {
  content: "";
  position: absolute;
  inset: -4%;
  background: url("art/field-land.webp?v=sha_a7d3ba87d531") center / cover no-repeat;
  animation: breathe 140s ease-in-out infinite alternate;
  will-change: transform;
}

/* the paper mist down the middle, where the type stands; it fades out toward the edges, where the field lives */
.field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(227 219 202 / 0) max(0px, calc(50% - 500px)),
    rgb(227 219 202 / var(--mist)) max(0px, calc(50% - 330px)),
    rgb(227 219 202 / var(--mist)) min(100%, calc(50% + 330px)),
    rgb(227 219 202 / 0) min(100%, calc(50% + 500px))
  );
}

@keyframes breathe {
  from {
    transform: scale(1.02) translate3d(-0.6%, 0.3%, 0);
  }
  to {
    transform: scale(1.05) translate3d(0.6%, -0.4%, 0);
  }
}

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

h1,
h2,
p,
dl,
dd,
ol,
ul,
pre {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
  border-radius: 2px;
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  padding: 0.5em 0.9em;
  background: var(--ink-line);
  color: var(--paper);
}

.skip:focus {
  top: 16px;
}

/* ---------------------------------------------------------------- sections: in front of the field, no ground of their own */
.s {
  position: relative;
  isolation: isolate;
  padding: var(--pad-y) var(--gutter);
  color: var(--text);
  /* draft 3: the strokes reach 8% past the text; on a phone that ran 9 px past the window, so the page
     scrolled sideways and the right river sat off screen. Clipped here, inside the strokes' own faded ends. */
  overflow-x: clip;
}

.s + .s,
main + .s {
  padding-top: calc(var(--pad-y) * 0.55);
}

.inner {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
}

/* the separator: one painted stroke of the section's pigment */
.stroke {
  height: clamp(44px, 6vw, 84px);
  margin: 0 -8% 1.2em;
  background: var(--stroke) center / cover no-repeat;
  /* soft ends and soft top and bottom: a stroke laid on the field, never a cut strip */
  -webkit-mask:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
}

.stone {
  --head: var(--stone);
  --stroke: url("art/stroke-stone.webp?v=sha_a5e916be57e6");
}

.paper {
  --head: var(--stone);
}

.ink,
.night {
  --head: var(--ink);
  --stroke: url("art/stroke-ink.webp?v=sha_0e778534d126");
}

.moss {
  --head: var(--moss);
  --stroke: url("art/stroke-moss.webp?v=sha_d0657fd78fb2");
}

.clay {
  --head: var(--clay);
  --stroke: url("art/stroke-clay.webp?v=sha_b44f6341940c");
}

/* ---------------------------------------------------------------- type */
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 740;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-bottom: 0.7em;
  color: var(--head);
}

.inner > p + p,
.inner > p + dl,
.inner > dl + p {
  margin-top: 1.1em;
}

strong {
  font-weight: 720;
}

/* ---------------------------------------------------------------- 1 hero */
.hero {
  padding-top: clamp(32px, 4vw, 64px);
}

.hero .inner {
  max-width: 34em;
}

.crown {
  width: clamp(190px, 21vw, 300px);
  margin: 0 auto clamp(16px, 2.5vw, 36px);
}

.name {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight: 760;
  letter-spacing: 0.01em;
  color: var(--stone);
  margin-bottom: 0.5em;
}

h1 {
  font-size: clamp(2rem, 4.1vw, 3.15rem);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.75em;
}

h1 span {
  display: block;
  margin-top: 0.45em;
  font-weight: 460;
  color: var(--stone);
}

.sub {
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- 2 the clearing */
/* a quiet clearing in the wash: the paper brightens round the button; nothing moves here */
.clearing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse min(46%, 520px) 62% at 50% 50%, rgb(240 234 222 / 0.95), rgb(240 234 222 / 0) 100%);
}

.clearing .inner {
  text-align: center;
  padding: clamp(8px, 2vw, 32px) 0;
}

/* the one button: clay and ink, still. No transition, no animation, no glow, no shadow. */
.buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0.55em 1.5em;
  border: 2px solid var(--ink-line);
  border-radius: 6px;
  background: var(--clay-fill);
  color: var(--clay-on);
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  font-weight: 720;
  line-height: 1.3;
  text-decoration: none;
}

.buy:hover {
  text-decoration: underline;
}

.buy:focus-visible {
  outline: 3px solid var(--ink-line);
  outline-offset: 5px;
}

.buy-note {
  margin: 1.2em auto 0;
  max-width: 24em;
}

/* ---------------------------------------------------------------- 3 token cost */
.lead {
  font-size: clamp(1.4rem, 2.1vw, 1.65rem);
  font-weight: 640;
  line-height: 1.6;
  color: var(--ink);
}

/* the figures: plain. One label, one number, a hairline between rows; nothing else. */
.figures {
  margin-top: 1.2em;
}

.figures div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1em;
  padding: 0.55em 0;
  border-top: 1px solid rgb(34 29 22 / 0.28);
}

.figures div:last-child {
  border-bottom: 1px solid rgb(34 29 22 / 0.28);
}

.figures dd {
  font-size: 1.5em;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- 4 how */
.h2-next {
  margin-top: 1.6em;
}

.steps,
.fixes {
  padding-left: 1.3em;
}

.steps li + li,
.fixes li + li {
  margin-top: 0.9em;
}

.how strong {
  color: var(--moss);
}

.fixes {
  margin-top: 1em;
}

/* ---------------------------------------------------------------- 5 audit */
.audit code,
.addr {
  color: var(--clay);
}

.addr {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- 6 who */
.who strong {
  color: var(--text);
}

/* ---------------------------------------------------------------- 7 quickstart, close */
pre {
  margin: 1.2em 0;
  padding: 1em 1.1em;
  overflow-x: auto;
  border: 1px solid rgb(31 43 61 / 0.3);
  border-radius: 4px;
  background: rgb(246 241 230 / 0.75);
  font-size: 0.8em;
  line-height: 1.55;
}

pre {
  white-space: pre-wrap; /* the long install line wraps inside the block: nothing hides past its edge */
}

pre code {
  font-size: 1em;
  overflow-wrap: anywhere;
}

.fine {
  margin-top: 2.4em;
  color: var(--stone);
}

.maker {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 1.4em;
  font-weight: 720;
}

.maker .mark {
  width: 40px;
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 860px) {
  body {
    font-size: 1.125rem; /* 18 px */
  }

  .inner,
  .hero .inner {
    max-width: none;
  }

  .field::before {
    background-image: url("art/field-tall.webp?v=sha_5fb63a801cf0");
  }

  /* a phone has no margins: the mist thins, so the field shows round the type (AA measured in shots/contrast.json) */
  :root {
    --mist: 0.72;
  }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .field::before {
    animation: none;
  }
}

/* ---------------------------------------------------------------- v1.8.16: the app's page
   Draft 3's look and words, served by the app (server/landing.py). What draft 3 never held is styled here:
   the live report inlined at the bottom (dogfood_page.body_html: h3 headings, tables, a notice box, two inline
   styles that read --mute and --hair) and the closing footer. */
:root {
  --mute: #4a3f30; /* quieter lines inside the live report (its inline style="color:var(--mute)") */
  --hair: rgb(34 29 22 / 0.28); /* table rules (its inline border-bottom: var(--hair)) */
}

h3 {
  margin: 1.4em 0 0.4em;
  font-size: 1.05em;
  font-weight: 720;
  line-height: 1.3;
  color: var(--head);
}

.live-report .inner {
  max-width: 40em;
}

.live-report h1 {
  margin: 0 0 0.6em;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 740;
  line-height: 1.15;
  color: var(--head);
}

.live-report h2 {
  margin-top: 1.4em;
}

.live-report p,
.live-report ul {
  margin: 0 0 1em;
}

.live-report ul {
  padding-left: 1.3em;
}

.live-report .sub {
  max-width: none;
  color: var(--mute);
}

.big {
  font-size: 1.35em;
  font-weight: 720;
  line-height: 1.4;
}

.accent {
  color: var(--ink);
}

.big,
.accent,
table {
  font-variant-numeric: tabular-nums;
}

/* a wide table scrolls inside itself; the page never scrolls sideways (draft 3, fix d) */
.live-report table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 1em 0;
  border-collapse: collapse;
  font-size: 0.8em;
}

.live-report th,
.live-report td {
  padding: 0.45em 0.6em;
  border-bottom: 1px solid var(--hair);
  text-align: right;
}

.live-report th:first-child,
.live-report td:first-child {
  text-align: left;
}

.live-report th {
  font-weight: 720;
  color: var(--head);
}

.live-report tr.figures td {
  font-weight: 720;
  border-top: 2px solid var(--ink);
}

.box {
  margin: 1em 0;
  padding: 0.6em 1em;
  border-left: 3px solid var(--clay);
  background: rgb(246 241 230 / 0.75);
}

section.math,
section.plain-words {
  margin-top: 1.6em;
  padding-top: 0.4em;
  border-top: 1px solid var(--hair);
}

.mantra {
  margin-top: 1.4em;
  color: var(--stone);
}

body > footer .s {
  padding-top: calc(var(--pad-y) * 0.55);
}