/* dwellory.css — TOKENS AND CHROME ONLY.
   ⛔ LAYOUT DOES NOT LIVE HERE. It lives in `_scripts/_base-css.mjs` and is emitted into every
   page's <style>. That split is written down because it has already broken a page once on a
   sibling property: freightprobe's /data was hand-built outside the generator, linked the
   token sheet, looked complete, and shipped to production with content clipped off the left
   edge because .wrap centring was never applied.
   ★ AN UNDECLARED DEPENDENCY THAT LOOKS SATISFIED IS WORSE THAN A MISSING ONE. A page with no
     CSS is obviously broken; a page with half of it looks like a design choice.

   PALETTE: dwellory is property and public record, not freight compliance. Deep slate ground,
   an ink-blue accent that reads as registry rather than alarm, and a warm neutral paper.
   ⛔ The three hue tokens are SEMANTIC and must keep their meaning across the property:
     --hue-money    the money/commercial axis (fees, pricing, placement)
     --hue-comply   the regulatory/licensure axis (status, statute, standing)
     --hue-operate  the operational axis (lifecycle, renewal, ordinary process)
   A chart that colours a licence status with --hue-money is lying about which axis it is on. */

:root {
  --paper:#fcfbf9;
  --text:#1f2429;
  --accent:#1d4e6f;

  --radius:12px;
  --wrap:1140px;

  --hue-money:#8a5a1c;
  --hue-comply:#1d4e6f;
  --hue-operate:#4a6b52;

  --display:'Source Serif 4',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --border:color-mix(in srgb, var(--text) 13%, var(--paper));
  --line:var(--border);
  --line-soft:color-mix(in srgb, var(--text) 7%, var(--paper));
  --surface:color-mix(in srgb, var(--text) 3%, var(--paper));
  --surface-high:color-mix(in srgb, var(--text) 6%, var(--paper));
  --muted-ink:color-mix(in srgb, var(--text) 62%, var(--paper));
  --on-accent:var(--paper);
}

/* ── THE GROUND LAYER ─────────────────────────────────────────────────────────────────
   Four corner washes plus a ruled texture, at opacities chosen to be VISIBLE rather than
   theoretically present. freightprobe shipped a ground layer measured invisible at 100%
   (two washes at 9% and 7% on near-white) and it had to be rebuilt; these are set higher
   and were checked against the actual paper value, not against an intention. */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(58rem 40rem at 92% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(46rem 34rem at -6% 104%, color-mix(in srgb, var(--hue-operate) 11%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 8% 4%, color-mix(in srgb, var(--hue-money) 7%, transparent), transparent 58%),
    linear-gradient(180deg, var(--paper), var(--paper));
}
/* ledger rules: a register property should feel like a ledger. Masked so they fade through
   the centre where the text sits, because a rule behind a paragraph is noise, not texture. */
body::after {
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--text) 4%, transparent) 0 1px,
    transparent 1px 34px);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  mask-image:linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}

/* ── MICRO-LABEL, the network's shared voice mark ── */
.mk {
  font-family:var(--mono); font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted-ink);
}

/* ── NAV BRAND: a pill with a three-line register mark ── */
.nav-brand {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .95rem .42rem .8rem;
  border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter:blur(4px);
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
}
.nav-brand::before {
  content:''; width:15px; height:13px; flex:none;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/15px 2.4px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 5.3px/10px 2.4px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 10.6px/13px 2.4px no-repeat;
}