/* 21Drucker.Farm — the look, in one place.
   Loaded by the shop index, the project pages and the server-rendered product
   and legal pages, so a colour is changed here and nowhere else.

   Chosen 2026-08-08: espresso base, plain grid, strong. */
:root {
  /* espresso: warm near-black, so the orange belongs to the page
     instead of sitting on top of a cold one */
  --bg: #14100B; --bg2: #1D1811; --bg3: #262018;
  --line: #362D20; --text: #F5F0E8; --muted: #A89A87;
  --orange: #F7931A; --orange-dark: #c97207; --green: #3ECF8E; --red: #E5484D;

  --glow-warm: rgba(247,147,26,.26);   /* light source behind the hero, left */
  --glow-cool: rgba(255,170,60,.12);   /* second one, right — warm too */
  --grid-rgb: 255,215,165;             /* pattern ink, tinted to the base */
  --pat-a: .060;                       /* "strong" */
  --pat-a2: .120;                      /* heavier lines, used by some patterns */
  --header-bg: rgba(20,16,11,.88);

  /* Tiles stay neutral black in every case: the colour lives in the background
     so the product photos are the only saturated thing on the page. */
  --card-bg: #121212; --card-line: #272727; --card-elev: #1D1D1D;
  --card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 28px -18px rgba(0,0,0,.9);
  --card-hover-shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -20px rgba(247,147,26,.35);
}

html { background: var(--bg); }
body { background: transparent; position: relative; color: var(--text); }

/* The grid. Fixed to the viewport so it reads as the surface the site sits on;
   the mask concentrates it behind the hero and thins it out further down. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(var(--grid-rgb), var(--pat-a)) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(var(--grid-rgb), var(--pat-a)) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(1500px 1100px at 50% -40px, #000 15%, rgba(0,0,0,.22) 100%);
  mask-image: radial-gradient(1500px 1100px at 50% -40px, #000 15%, rgba(0,0,0,.22) 100%);
}
/* Two soft light sources behind the top of the page; these scroll away with it. */
body::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 820px; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 480px at 22% -120px, var(--glow-warm), transparent 68%),
              radial-gradient(820px 460px at 88% 0px, var(--glow-cool), transparent 65%);
}