:root{
  --site-bg:#090807;
  --site-bg-rgb:9,8,7;
  --site-bg2:#100e0d;
  --site-panel:#171310;
  --site-panel2:#211b17;
  --site-line:rgba(210,96,67,.24);
  --site-line-soft:rgba(240,210,173,.09);
  --site-accent:#d26043;
  --site-accent-rgb:210,96,67;
  --site-accent2:#f0d2ad;
  --site-accent-deep:#8b3029;
  --site-ink:#f5ecdf;
  --site-ink2:#c3b4a7;
  --site-ink3:#918279;
  --site-button-ink:#fff8ef;
  --site-success:#78b88a;
  --site-danger:#e45445;
  --site-hero-image:url('./images/hate/hate-shop-bg.jpg');
  --site-logo-image:url('./images/hate/logo.webp');
  --site-shadow:0 28px 90px rgba(0,0,0,.48);
}

html{background:var(--site-bg)}
body.site-public{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(900px 520px at 74% -10%,rgba(var(--site-accent-rgb),.16),transparent 68%),
    linear-gradient(180deg,rgba(var(--site-bg-rgb),.76),rgba(var(--site-bg-rgb),.97)),
    var(--site-hero-image) center 18%/cover fixed,
    var(--site-bg);
  color:var(--site-ink);
}
body.site-public::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(240,210,173,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,210,173,.014) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}

::selection{background:rgba(var(--site-accent-rgb),.42);color:var(--site-ink)}