/* ALL — style.css
   One file. Three colors. Separation by distance alone.

   Contents:
     1. Font
     2. Tokens & base
     3. Type
     4. Links & focus
     5. Hero & mark
     6. Sections (index)
     7. Spec sheet
     8. Price curve
     9. Equation
    10. CTA & footer
    11. Paper & verify pages
    12. Table
    13. Motion
    14. Small screens

   The palette is exactly three colors, inverted for a dark
   ground: near-black background, off-white ink, one secondary
   gray. Off-white (not pure white) on near-black (not pure
   black) keeps contrast high without the halation of a
   max-contrast pair. Gray is reserved for labels and
   placeholders, never for body copy. */

/* 1. Font ------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212, U+2215;
}

/* 2. Tokens & base --------------------------------------------- */

:root {
  --bg: #0B0B0F;
  --ink: #F5F5F7;
  --gray: #9AA1AC;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
}

/* 3. Type ------------------------------------------------------ */

h1,
h2,
strong {
  font-weight: 600;
}

.label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

.ph {
  color: var(--gray);
  font-weight: 400;
  font-style: normal;
}

/* 4. Links & focus --------------------------------------------- */

a {
  color: inherit;
}

a.quiet {
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a.quiet:hover {
  color: var(--ink);
}

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

/* 5. Hero & mark ----------------------------------------------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.mark {
  width: 244px;
  height: 244px;
}

.wordmark {
  margin-top: 48px;
  font-size: 150px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.tagline {
  margin-top: 28px;
  font-size: 20px;
}

/* 6. Sections (index) ------------------------------------------ */

main > section {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px;
}

/* Each block opens with a small-caps label naming what it explains,
   in the same voice as the spec sheet's row names — a shade heavier
   so it reads as the heading of the rows beneath it. */
main > section > .label {
  margin-bottom: 28px;
  font-weight: 600;
}

.definition p,
.economy p {
  font-size: 20px;
  line-height: 2.1;
}

/* 7. Spec sheet ------------------------------------------------ */

.spec dl {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: 26px;
  column-gap: 32px;
}

.spec dd {
  text-align: right;
  text-wrap: balance;
  font-size: 19px;
}

/* 8. Price curve ----------------------------------------------- */

/* The price of one ALL against dollars in reserve, log–log. Drawn
   as a static SVG; curve.js moves the reader along it. */

/* Six plain lines that say what the chart is measuring, so the
   numbers are legible on a first read. */
.curve-lead p {
  font-size: 20px;
  line-height: 2.1;
  text-wrap: pretty;
}

/* One rhythm: every block is separated by the same gap (two section
   paddings). The chart's margin matches that gap, less the SVG's own
   top margin before its first tick label, so the lead-in sits
   equidistant from the spec sheet above and the chart below. */
.curve svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 112px;
  overflow: visible;
}

.curve-axis,
.curve-tick {
  stroke: var(--gray);
  stroke-width: 1;
}

.curve-label,
.curve-title {
  fill: var(--gray);
  font-family: "Inter", -apple-system, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.curve-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.curve-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
}

.curve-guide {
  stroke: var(--gray);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.curve-marker {
  fill: var(--ink);
}

/* The slider is a hairline track with a small ink thumb, in the
   same language as the table rules — no browser chrome. */
.curve input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 28px;
  background: none;
  cursor: pointer;
}

.curve input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--gray);
}

.curve input[type="range"]::-moz-range-track {
  height: 1px;
  background: var(--gray);
}

.curve input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6.5px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

.curve input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

.curve-readout {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

.curve-readout p + p {
  margin-top: 8px;
}

.curve-readout b {
  font-weight: 400;
  color: var(--ink);
}

.curve-readout-part {
  white-space: nowrap;
}

.curve-readout .sep {
  margin: 0 8px;
}

.curve-note {
  margin-top: 18px;
  text-align: center;
  text-wrap: balance;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray);
}

/* 9. Equation -------------------------------------------------- */

.equation {
  text-align: center;
}

.equation p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

/* Space between stacked equations (the note keeps its own,
   tighter margin from the rule below). */
.equation p + p {
  margin-top: 28px;
}

/* Exponents set as true superscripts on e. Sized down and left
   free to wrap at spaces so a long exponent never overflows a
   narrow screen. */
.equation sup {
  font-size: 0.62em;
  line-height: 1;
}

/* What the equations mean, in words. Same measure as the equations,
   set in the text face rather than the math face. */
.equation .plain {
  font-family: "Inter", -apple-system, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: normal;
  text-wrap: balance;
}

.equation .note {
  margin-top: 20px;
  font-family: "Inter", -apple-system, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--gray);
  letter-spacing: normal;
}

/* 10. CTA & footer --------------------------------------------- */

.cta {
  text-align: center;
}

.button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  padding: 20px 52px;
  border-radius: 4px;
}

/* Secondary button: the paper's placeholder PDF download. Quieter
   than the one ink CTA — hairline outline, no fill. */
.button.secondary {
  background: none;
  color: var(--ink);
  border: 1px solid var(--gray);
  font-size: 15px;
  padding: 12px 26px;
}

.button.secondary .ph {
  font-size: 13px;
}

.cta nav {
  margin-top: 44px;
  font-size: 14px;
}

.cta nav .sep {
  color: var(--gray);
  margin: 0 10px;
}

footer {
  text-align: center;
  padding: 0 24px 72px;
}

footer p {
  font-size: 13px;
  font-style: italic;
  color: var(--gray);
}

footer p + p {
  margin-top: 8px;
}

/* 11. Paper & verify pages ------------------------------------- */

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.page .back {
  font-size: 14px;
}

.page h1 {
  margin-top: 72px;
  font-size: 34px;
  line-height: 1.25;
}

.page .byline {
  margin-top: 16px;
  font-size: 15px;
  color: var(--gray);
}

.page .paper-download {
  margin-top: 40px;
}

.page h2 {
  margin-top: 88px;
  font-size: 22px;
}

.page p,
.page ul {
  margin-top: 26px;
  font-size: 19px;
  line-height: 1.7;
}

.page ul {
  padding-left: 24px;
}

.page li {
  margin-top: 14px;
}

.page .abstract {
  margin-top: 56px;
}

.page .equation {
  margin-top: 36px;
  margin-bottom: 36px;
  padding: 0 12px;
}

/* The playbook's closing paragraph: set off from the last list by the
   same distance as a heading, without a heading. */
.page .measure {
  margin-top: 64px;
}

.page .legal {
  margin-top: 88px;
  font-style: italic;
  font-size: 15px;
  color: var(--gray);
}

.page .foot {
  margin-top: 72px;
  font-size: 14px;
}

/* Code on the build page: monospace, no box, wraps addresses anywhere
   so a 44-character mint never forces a horizontal scroll. */
.page code,
.page pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.page code {
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.page pre {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.page th[scope="row"] {
  width: 9em;
  color: var(--gray);
  font-weight: 400;
}

/* 12. Table ---------------------------------------------------- */

table {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 14px 24px 14px 0;
  border-bottom: 1px solid var(--gray);
  font-weight: 400;
}

th {
  font-weight: 600;
}

/* 13. Motion --------------------------------------------------- */

/* The only motion on the site: on load, the mark drifts ~7px into
   place. Subtle enough to miss. It moves as a whole — the circle
   and square knock each other out, so animating them apart would
   break the overlap. */

.mark {
  animation: settle 600ms ease-out;
}

@keyframes settle {
  from {
    transform: translate(-7px, -7px);
  }
  to {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark {
    animation: none;
  }
}

/* 14. Small screens -------------------------------------------- */

@media (max-width: 600px) {
  .wordmark {
    font-size: 72px;
  }

  .mark {
    width: 168px;
    height: 168px;
  }

  main > section {
    padding: 48px 24px;
  }

  .definition p,
  .economy p,
  .curve-lead p {
    font-size: 18px;
    line-height: 1.9;
  }

  .spec dl {
    row-gap: 20px;
  }

  .spec dd {
    font-size: 17px;
  }

  .page .equation p {
    font-size: 16px;
  }

  th,
  td {
    padding-right: 14px;
    font-size: 14px;
  }

  /* SVG text scales with the viewBox, so enlarge the chart labels,
     thin out alternate x-axis labels, and drop the rotated y-axis
     title (the readout already says "per ALL"). */
  .curve-label {
    font-size: 18px;
  }

  .curve-title {
    font-size: 17px;
  }

  .curve-title-y,
  .curve-label-alt,
  .curve-readout .sep {
    display: none;
  }

  .curve svg {
    margin-top: 90px;
  }

  .curve-readout-part {
    display: block;
    white-space: normal;
  }

  .curve-readout-part + .curve-readout-part {
    margin-top: 6px;
  }
}

/* 15. Brand page ----------------------------------------------- */

/* Previews sit on their own grounds, since the mark exists only in
   black and white; everything else keeps the page's rhythm. */
.page .kit {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.page .kit-note {
  font-size: 14px;
  color: var(--gray);
}

.brand .tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

.brand .tile {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}

.brand .tile img,
.brand .banner img {
  display: block;
  width: 100%;
  height: auto;
}

.brand .banner {
  margin: 28px 0 0;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}

.page .files {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 14px;
  line-height: 1.6;
}

.page .files li {
  margin: 0;
}

.brand .swatches {
  list-style: none;
  padding: 0;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.brand .swatches li {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.brand .swatch {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--gray);
  margin-bottom: 10px;
}

.brand .swatch-black { background: #000000; }
.brand .swatch-white { background: #FFFFFF; }
.brand .swatch-near-black { background: #0B0B0F; }
.brand .swatch-off-white { background: #F5F5F7; }
.brand .swatch-gray { background: #9AA1AC; }

.brand .swatch-name {
  display: block;
}

.brand .swatches code {
  font-size: 13px;
  color: var(--gray);
}

.brand .type-sample {
  margin-top: 36px;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.brand .type-heavy {
  font-weight: 600;
}

.brand .type-light {
  font-weight: 400;
  color: var(--gray);
}

@media (max-width: 600px) {
  .brand .swatches {
    grid-template-columns: repeat(3, 1fr);
  }

  .brand .type-sample {
    font-size: 28px;
  }
}

/* 16. Addresses and live figures ------------------------------- */

/* The mint under the buttons, and a copy button beside it that reads
   like a quiet link. Without JavaScript the address is still there. */
.mint {
  margin-top: 40px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray);
}

.mint-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 10px;
}

.mint code,
.page .copy {
  font-size: 12.5px;
}

.mint code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.copy {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 10px;
  font: inherit;
  font-size: 13px;
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

.copy:hover {
  color: var(--ink);
}

.page td .copy {
  margin-left: 8px;
}

/* The directory: four columns, the header row in the label voice. */
.page .directory th[scope="col"] {
  width: auto;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

/* 17. Pay page ------------------------------------------------- */

/* Four fields, each a label over a hairline-underlined input, in the
   page's own type. The QR code sits on a white tile, since a code
   needs a light ground. */
.pay p {
  margin-top: 28px;
}

.pay label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}

.pay label .ph {
  text-transform: none;
  letter-spacing: normal;
}

.pay input {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gray);
  border-radius: 0;
  padding: 8px 0;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
}

.pay input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.pay .pay-note {
  min-height: 1.6em;
  font-size: 14px;
  color: var(--gray);
}

.page .pay-url code {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.page .copy:disabled {
  color: var(--gray);
  opacity: 0.5;
  cursor: default;
  text-decoration: none;
}

.qr {
  margin-top: 28px;
  width: 260px;
  max-width: 100%;
}

.qr svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 4px;
}

/* The live table's figures are the ink; the dashes stay gray. */
.page .live td {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .mint-label {
    display: block;
    margin: 0 0 4px;
  }

  .mint code {
    font-size: 11.5px;
  }
}