/* ═══════════════════════════════════════════════════════════════════════════
   THEME 08 — "WHITE + SAND"
   Inherits Bare Metal. Two colours only: white type and a warm sandstone
   accent. No blue anywhere on the page.

   Sandstone here is a true warm buff rather than the bone of theme 05 — it has
   to sit far enough from the white type to still read as an accent when it
   fills a button. Ember stays for rush, and is the only other colour present.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* warm near-black so the sand sits in the same family as the ground */
  --void:#0A0908;
  --steel:#141210;
  --steel-2:#1C1917;
  --steel-3:#27231E;
  --line:#38322A;
  --line-soft:#231F1A;

  /* the accent: sandstone. warm buff, deep enough to separate from white type */
  --hazard:#D4B98C;
  --hazard-hot:#E8D3AC;
  --hazard-deep:#A08A62;
  --hazard-dim:rgba(212,185,140,.10);
  --hazard-line:rgba(212,185,140,.34);

  /* rush only — the single other colour on the page */
  --ember:#E8562A;
  --ember-dim:rgba(232,86,42,.15);

  /* type: white, kept just off pure so it does not halate over long reads */
  --chalk:#F5F4F1;
  --ash:#9E978C;
  --ash-2:#6E6860;

  --sb-track:#141210; --sb-thumb:#443C31; --sb-thumb-hover:#5C5142;

  --forest-2:#060505;
}

/* sand is light — anything filled with it takes dark type */
.btn-call{ color:#161008; }
.rushbar{ color:#161008; }
.rushbar b,.rushbar svg{ color:#161008; }
.area.hq,.portal-tabs a.on,.post-meta .tag,.ba figure:last-child figcaption,
.dock .d-call{ color:#161008; }

.btn-call:hover{ box-shadow:0 0 26px rgba(212,185,140,.26); }

/* headings stay white; sand is reserved for marks and actions */
.hero h1 em{ color:var(--hazard); }
.eyebrow{ color:var(--hazard); }   /* the rule inherits this via currentColor */
.foot-col h4{ color:var(--hazard); }

/* striping in the accent rather than a hazard signal */

/* grit picks up warm sparks instead of cool ones */
.grit{
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.52), transparent),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.7px 1.7px at 58% 28%, rgba(255,255,255,.32), transparent),
    radial-gradient(1.1px 1.1px at 77% 74%, rgba(212,185,140,.34), transparent),
    radial-gradient(1.4px 1.4px at 90% 38%, rgba(255,255,255,.26), transparent),
    radial-gradient(1px 1px at 22% 86%, rgba(255,255,255,.36), transparent),
    radial-gradient(1.2px 1.2px at 66% 92%, rgba(212,185,140,.24), transparent);
}
.hero::before{ background:radial-gradient(closest-side, rgba(212,185,140,.07), transparent 70%); }
.dark::before{
  background:
    radial-gradient(150px 80px at 10% 100%, rgba(212,185,140,.15), transparent 70%),
    radial-gradient(200px 96px at 38% 106%, rgba(212,185,140,.10), transparent 70%),
    radial-gradient(170px 86px at 68% 102%, rgba(212,185,140,.13), transparent 70%),
    radial-gradient(220px 100px at 92% 104%, rgba(212,185,140,.08), transparent 70%);
}