@font-face {
  font-family: Gambarino;
  src: url(/fonts/gambarino.woff2) format('woff2');
  font-display: block;
}

:root {
  --ink: #0d1b13;
  --moss: #24482f;
  --fern: #7fa65a;
  --sun: #f2c75c;
  --light: #f7ecc9;
  --gutter: max(20px, 7vw);
  --serif: Gambarino, Georgia, serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--light); }
body { font: 16px/1.5 system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

canvas.field { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* ---------- home ---------- */

.home { height: 100svh; min-height: 520px; position: relative; overflow: hidden; }
.home canvas.field { position: absolute; inset: 0; }

/* the wordmark is set as type until the field takes over drawing it */
.gl .home .fallback-mark { display: none; }
.home .fallback-mark {
  position: absolute; left: var(--gutter); top: 18vh; margin: 0;
  font: 400 clamp(96px, 24vw, 360px)/1 var(--serif); color: var(--sun);
}

.lede {
  position: absolute;
  left: var(--wx, var(--gutter));
  top: var(--ly, 68%);
  max-width: min(46rem, calc(100vw - 2 * var(--gutter)));
  text-wrap: balance;
  margin: 0;
  text-shadow: 0 0 3px var(--ink), 0 0 14px var(--ink), 0 0 30px var(--ink);
}
.lede p { margin: 0; }
.lede .line { font: 400 clamp(24px, 2.5vw, 36px)/1.2 var(--serif); color: var(--light); }
.lede .sub { margin-top: .7em; max-width: 36rem; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: color-mix(in oklab, var(--light) 88%, var(--ink)); text-wrap: pretty; }
.lede .ask { margin-top: 1em; font-size: clamp(17px, 1.35vw, 20px); color: var(--light); }
.lede .ask button { color: var(--light); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sun) 55%, transparent); text-underline-offset: 4px; transition: color .2s; }
.lede .ask button:hover { color: var(--sun); text-decoration-color: var(--sun); }

@media (max-width: 719px) {
  .lede { left: var(--gutter); right: var(--gutter); text-align: center; max-width: none; }
}

/* ---------- the token line (our footer) ---------- */

.tokenline {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px var(--gutter) 22px;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 28px; flex-wrap: wrap;
  font: 400 19px/1.2 var(--serif);
}
.tokenline[hidden], .composer[hidden] { display: none; }

.tokgroup { display: inline-block; white-space: pre; color: var(--light); text-decoration: none; }

.tok { position: relative; border-radius: 2px; transition: background-color .25s, color .25s; }
/* four dark, distinct tones so light type always clears its band */
.tok.t0 { background: #2a5236; }
.tok.t1 { background: #3d4f22; }
.tok.t2 { background: #1f3f3a; }
.tok.t3 { background: #4a3f1c; }
.tok[data-id]::before {
  content: attr(data-id);
  content: attr(data-id) / "";
  position: absolute; left: 1px; bottom: calc(100% + 3px);
  font: 10px/1 var(--mono); letter-spacing: .02em;
  color: color-mix(in oklab, var(--fern) 75%, var(--light));
  white-space: nowrap; pointer-events: none;
}
.tok.t1[data-id]::before, .tok.t3[data-id]::before { bottom: auto; top: calc(100% + 3px); }
:is(a, button).tokgroup:hover .tok, :is(a, button).tokgroup:focus-visible .tok { background: var(--sun); color: var(--ink); }
/* in the footer, ids surface only on the link you're touching */
.tokgroup .tok::before { opacity: 0; transition: opacity .2s; }
:is(a, button).tokgroup:hover .tok::before, :is(a, button).tokgroup:focus-visible .tok::before { opacity: 1; color: var(--sun); }

/* composer: a live input laid exactly over its own tokenization */
.composer {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px var(--gutter) 22px;
  display: flex; align-items: flex-end; gap: 22px;
  font: 400 24px/1.2 var(--serif);
}
.composer .to { font: 13px/1.6 var(--mono); color: color-mix(in oklab, var(--fern) 85%, var(--light)); white-space: nowrap; padding-bottom: 2px; }
.composer .well { position: relative; flex: 1; min-width: 0; height: 1.6em; }
.composer .well .under, .composer input {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0;
  font: inherit; letter-spacing: 0; white-space: pre; line-height: 1.6em;
}
.composer .well .under { pointer-events: none; clip-path: inset(-22px 0 -20px 0); }
.composer .well .under > span { display: block; will-change: transform; }
.composer input { width: 100%; background: transparent; color: transparent; caret-color: var(--sun); outline: none; }
.composer input::placeholder { color: color-mix(in oklab, var(--light) 45%, var(--ink)); }
.composer .well:has(input:focus-visible) { outline: none; }
.composer .meta { font: 13px/1.6 var(--mono); color: color-mix(in oklab, var(--light) 60%, var(--ink)); white-space: nowrap; display: flex; gap: 18px; padding-bottom: 2px; }
.composer .meta button { color: var(--light); }
.composer .meta button:hover { color: var(--sun); }
.composer .meta .send[disabled] { opacity: .35; cursor: default; }

@media (max-width: 719px) {
  .tokenline { justify-content: center; gap: 14px 16px; font-size: 16px; padding-bottom: 18px; }
  /* phone: address, then a full-width writing line, then the controls */
  .composer { flex-wrap: wrap; align-items: center; gap: 30px 18px; font-size: 20px; padding-top: 18px; }
  .composer .to { width: 100%; padding-bottom: 0; }
  .composer .well { flex: 1 1 100%; }
  .composer .meta { width: 100%; padding-bottom: 0; }
  .composer .meta .count { margin-right: auto; }
}

/* ---------- reading pages (privacy, 404) ---------- */

.band { height: 42vh; min-height: 260px; position: relative; }
.band a.home-link { position: absolute; left: var(--gutter); top: 22px; font: 400 22px/1 var(--serif); color: var(--light); text-decoration: none; text-shadow: 0 1px 2px var(--ink); }
.band a.home-link:hover { color: var(--sun); }

.doc { max-width: 40rem; margin: 0 auto; padding: 48px var(--gutter) 96px; }
.doc h1 { font: 400 clamp(34px, 5vw, 52px)/1.1 var(--serif); margin: 0 0 .2em; color: var(--sun); text-wrap: balance; }
.doc .stamp { font: 12px/1.6 var(--mono); color: color-mix(in oklab, var(--fern) 85%, var(--light)); margin: 0 0 40px; }
.doc h2 { font: 400 24px/1.25 var(--serif); margin: 44px 0 10px; color: var(--light); }
.doc h3 { font: 600 15px/1.4 system-ui, sans-serif; margin: 22px 0 4px; color: var(--light); }
.doc strong { color: var(--light); font-weight: 600; }
.doc li + li { margin-top: .45em; }
.doc .short { margin: 0 0 8px; padding: 22px 26px 18px; background: color-mix(in oklab, var(--moss) 55%, var(--ink)); border-radius: 6px; }
.doc .short h2 { margin-top: 0; color: var(--sun); }
.doc .short ul { margin: 0; }
.doc p, .doc li { color: color-mix(in oklab, var(--light) 82%, var(--ink)); }
.doc ul { padding-left: 1.1em; }
.doc code { font: 13px var(--mono); color: var(--light); }
.doc .lens {
  font: italic 13px/1.6 system-ui, sans-serif; color: var(--light);
  border-bottom: 1px dotted var(--fern); padding-bottom: 1px;
}
.doc .lens:hover { color: var(--sun); border-color: var(--sun); }
.doc.tokenized p, .doc.tokenized li, .doc.tokenized h2, .doc.tokenized h3 { line-height: 3.1; }
.doc.tokenized .tok[data-id]::before { bottom: calc(100% - 1px); }

/* ---------- analytics choice ---------- */

.consent {
  position: fixed; z-index: 10; right: var(--gutter); bottom: 84px;
  max-width: 21rem; padding: 14px 16px;
  background: var(--ink); border-radius: 6px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--moss) 80%, var(--ink));
  font-size: 14px; line-height: 1.45; color: var(--light);
}
.consent p { margin: 0 0 10px; }
.consent a { color: var(--fern); }
.consent .choices { display: flex; gap: 8px; }
.consent button.tok { font: 400 17px/1.3 var(--serif); padding: 0 2px; color: var(--light); }
.consent button.tok:hover, .consent button.tok:focus-visible { background: var(--sun); color: var(--ink); }

@media (max-width: 719px) {
  .consent { left: var(--gutter); right: var(--gutter); top: 16px; bottom: auto; max-width: none; }
}