/* ============================================================
   touchup mafia — the layer every Acronym surface shares
   Depends on tokens.css. Load it second, before the surface.

       tokens.css   what the brand is made of
       base.css     what every screen made of it already agrees on
       <surface>    what this one screen does differently

   Two surfaces load this: the portfolio and /go. The invoice does
   not, and should not — `invoice.css` models thermal paper, warms
   every neutral to hue 85 and sets one monospace character cell.
   It is a different physical object, and sharing a reset with it
   would be the first step to flattening the distinction that makes
   it read as a receipt.
   ============================================================ */

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

html {
  /* Kills the I-beam over non-text. One line, disproportionate
     polish — lifted from paulethenriette.com. */
  cursor: default;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink-faint) transparent;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------------------
   The surfaces we did not draw

   Selection, the caret, scrollbars and the numerals in a column all
   ship with browser defaults that belong to no design system. Theming
   them is the cheapest signal that a page was built rather than
   assembled, and the one most often skipped.
   ------------------------------------------------------------ */

::selection { background: var(--signal-quiet); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-faint); }
::-webkit-scrollbar-track { background: transparent; }

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

/* ------------------------------------------------------------
   Grain

   On the GROUND, never over the photographs. 256px tile, matching
   Cargo's --noise-density-size. Each surface sets its own strength:
   a poster can carry more than a working screen can.
   ------------------------------------------------------------ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--grain-z, 60);
  pointer-events: none;
  opacity: var(--grain, 0.032);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ------------------------------------------------------------
   The handful of things both surfaces say the same way
   ------------------------------------------------------------ */

/* Small uppercase label. The single most repeated pattern in this
   brand — 21 hand-written copies across three stylesheets before
   this existed. */
.caps {
  font-size: var(--text-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

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

/* Figures in a column only line up as tabular. */
.num { font-variant-numeric: tabular-nums; }

/* Icons are drawn, in one stroke weight, so they sit in the same
   optical layer as every hairline. */
.icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.mark svg { width: 100%; height: auto; fill: currentColor; }

/* The wordmark ships as a file with fill="currentColor", which in an
   <img> resolves to pure black. 0.85 is exactly --ink, so the mark
   matches the text beside it instead of sitting a shade darker. */
img.mark { width: 100%; height: auto; opacity: 0.85; }
[data-scheme="dark"] img.mark { filter: invert(1); opacity: 0.88; }

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