/* SITE KIT — surfaces: the ground every object sits on.                                   surfaces.css v1 (2026-10-18)
   Adam, 10/18: "i hate the stock backgrounds ... they repeatedly come out stock looking the first time". The artifact rebuilds
   made every section an object, and the objects still sat on the kit's flat paper and stone. A surface is the material the
   object lives on in the client's world: the yard sign stands in a lawn, the clipboard lies on a trailer deck, the porthole
   sits in a hull, the window sits in lap siding. Pick the surface WITH the object (concept.json artifacts: "surface").
   Rules: every surface is LIGHT (Adam's light-only ruling stands) and LOW-CONTRAST, so 17px ink and 15px muted text keep
   4.5:1 on it; detail lives in the 3 to 16% alpha range. Use them two ways:
     in site.css      .xx-band { background: var(--sf-concrete) }        (recommended: one rule per band, in the site's file)
     as a class       <section class="sf-concrete">                     (quick; loses to any site.css background rule)
   A photograph of theirs, washed light: .sf-wash with style="--sf-photo:url(/assets/img/x.jpg?v=...)" (or the var in
   site.css). The gate's STOCK GROUND check (audit.mjs TEMPLATE) fails a page with more than one band on a plain flat fill. */
:root {
  /* LAWN: pale mown stripes, two passes and the grain of the cut (lawn care, landscaping, golf, parks) */
  --sf-lawn: repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(112deg, rgba(255,255,255,.34) 0 110px, rgba(110,145,80,.07) 110px 220px), #E3ECD3;
  /* DECK: weathered trailer or dock boards, the gaps and the grain (landscaping, marine, decks, fencing) */
  --sf-deck: repeating-linear-gradient(180deg, transparent 0 52px, rgba(95,85,70,.17) 52px 54px),
    repeating-linear-gradient(179.2deg, rgba(255,255,255,.2) 0 1px, transparent 1px 7px), repeating-linear-gradient(180.7deg, rgba(120,105,85,.05) 0 1px, transparent 1px 12px), #E9E5DC;   /* the grain runs along the boards */
  /* CONCRETE: a light shop or garage floor, mottled, with the saw-cut joints (auto, fabrication, warehouses, gyms) */
  --sf-concrete: repeating-linear-gradient(90deg, transparent 0 478px, rgba(115,115,110,.15) 478px 480px),
    radial-gradient(rgba(120,120,115,.06) 1px, transparent 1.5px) 0 0 / 7px 11px, radial-gradient(rgba(110,110,105,.05) 1.5px, transparent 2px) 3px 5px / 13px 17px,
    radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.6px) 5px 2px / 19px 23px,
    radial-gradient(ellipse 60% 40% at 22% 30%, rgba(255,255,255,.55), transparent 70%), radial-gradient(ellipse 50% 60% at 78% 75%, rgba(150,150,145,.12), transparent 70%),
    radial-gradient(ellipse 30% 25% at 55% 15%, rgba(160,160,152,.08), transparent 70%), #E4E4E0;
  /* BLOCK: a painted cinder-block wall, courses and staggered joints (shops, fabrication, gyms, warehouses) */
  --sf-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cg fill='none' stroke='%23707068' stroke-opacity='.17' stroke-width='2'%3E%3Cpath d='M0 1H160M0 41H160M1 1V41M81 41V81'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 80px,
    linear-gradient(180deg, #F0F0ED, #E8E8E4);
  /* HULL: white gelcoat with a boot stripe near the bottom; set --sf-stripe to their colour (marine, boatyards, charters) */
  --sf-hull: linear-gradient(180deg, rgba(255,255,255,.7), transparent 35%, rgba(150,155,160,.08)), #F2F3F1;
    /* a boot stripe in THEIR colour, written where it is used (a var inside :root cannot take a band's colour):
       background: linear-gradient(180deg, transparent calc(100% - 58px), var(--accent) calc(100% - 58px) calc(100% - 44px), transparent calc(100% - 44px)), var(--sf-hull); */
  /* SIDING: white lap siding, each board's lip and shadow (home builders, painters, roofers, exteriors) */
  --sf-siding: repeating-linear-gradient(180deg, rgba(255,255,255,.95) 0 2px, transparent 2px 30px, rgba(60,55,45,.05) 30px 33px, rgba(60,55,45,.15) 33px 34px), #F2F0EB;
  /* BATTEN: board and batten, the raised strips and their shadows (farmhouses, barns, builders, venues) */
  --sf-batten: repeating-linear-gradient(90deg, transparent 0 110px, rgba(60,55,45,.1) 110px 112px, rgba(255,255,255,.85) 112px 114px, rgba(255,255,255,.35) 114px 124px, rgba(60,55,45,.12) 124px 126px), #F1EFE9;
  /* LIMESTONE: ashlar blocks, thin joints and the stone's speckle (masons, builders, monuments, inns) */
  --sf-limestone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160'%3E%3Cg fill='none' stroke='%23786E5C' stroke-opacity='.18' stroke-width='1.5'%3E%3Cpath d='M0 .75H320M0 80.75H320M.75 0V80M200.75 0V80M100.75 80V160M280.75 80V160'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 320px 160px,
    radial-gradient(rgba(120,110,92,.06) 1px, transparent 1.5px) 0 0 / 7px 11px, radial-gradient(rgba(120,110,92,.05) 1.5px, transparent 2px) 4px 6px / 13px 17px,
    radial-gradient(ellipse 40% 30% at 30% 40%, rgba(255,255,255,.4), transparent 70%), #ECE7DD;
  /* VELLUM: drafting vellum, the fine grid and the major lines (builders, architects, engineers, surveyors) */
  --sf-vellum: linear-gradient(rgba(60,100,140,.1) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(60,100,140,.1) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(60,100,140,.05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(60,100,140,.05) 1px, transparent 1px) 0 0 / 24px 24px, #F2F5F6;
  /* OAK: white oak planks, the joints and the grain (builders, cabinetry, flooring, furniture, cafes) */
  --sf-oak: repeating-linear-gradient(180deg, transparent 0 94px, rgba(120,90,50,.16) 94px 96px),
    repeating-linear-gradient(2deg, rgba(255,250,240,.3) 0 1px, transparent 1px 9px), repeating-linear-gradient(-1deg, rgba(150,110,60,.06) 0 2px, transparent 2px 19px), #EFE5D3;
  /* LINEN: a woven cloth (spas, bridal, inns, restaurants, letterpress cards) */
  --sf-linen: repeating-linear-gradient(0deg, rgba(255,255,255,.28) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120,100,70,.06) 0 1px, transparent 1px 3px), #EFEAE0;
  /* STEEL: light brushed steel, the brushing and a soft sheen (fabrication, auto, kitchens, elevators) */
  --sf-steel: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 45%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.24) 0 1px, rgba(30,34,38,.035) 1px 2px, transparent 2px 3px), #E2E5E7;
  /* PLATE: light aluminum diamond plate (truck boxes, trailers, boat decks, fabrication) */
  --sf-plate: linear-gradient(135deg, transparent 0 40%, rgba(255,255,255,.55) 40% 46%, rgba(120,128,135,.22) 46% 52%, transparent 52%) 0 0 / 30px 16px,
    linear-gradient(45deg, transparent 0 40%, rgba(255,255,255,.55) 40% 46%, rgba(120,128,135,.22) 46% 52%, transparent 52%) 15px 8px / 30px 16px, #E1E4E6;   /* strips and frames; never under long body copy */
  /* PLASTER: warm hand-troweled plaster (spas, inns, salons, galleries, restaurants) */
  --sf-plaster: radial-gradient(ellipse at 15% 20%, rgba(255,255,255,.6), transparent 40%), radial-gradient(ellipse at 85% 65%, rgba(170,150,120,.1), transparent 45%),
    radial-gradient(ellipse at 45% 90%, rgba(255,255,255,.4), transparent 35%), #F1ECE4;
  /* SAND: a beach or a dune path, the grains (coastal, charters, rentals, waterfront) */
  --sf-sand: radial-gradient(rgba(150,125,90,.07) 1px, transparent 1.4px) 0 0 / 5px 7px, radial-gradient(rgba(150,125,90,.06) 1px, transparent 1.6px) 2px 3px / 11px 13px,
    radial-gradient(rgba(255,255,255,.4) 1px, transparent 1.5px) 4px 1px / 17px 19px, radial-gradient(ellipse 50% 30% at 70% 30%, rgba(255,255,255,.35), transparent 70%), #EFE6D6;
  /* WATER: pale water light, long low ripples (marinas, charters, waterfront, pools) */
  --sf-water: repeating-linear-gradient(178deg, transparent 0 22px, rgba(255,255,255,.5) 22px 24px, transparent 24px 46px), repeating-linear-gradient(181deg, transparent 0 37px, rgba(60,110,140,.06) 37px 39px), #E3EEF1;
  /* KRAFT: kraft paper, the fibres (bakeries, farms, markets, butchers, shops) */
  --sf-kraft: repeating-linear-gradient(17deg, rgba(255,255,255,.12) 0 1px, transparent 1px 7px), repeating-linear-gradient(-23deg, rgba(110,80,40,.05) 0 1px, transparent 1px 11px), #EADFCB;
  /* WASH: a photograph of theirs under a veil of their paper (any trade): set --sf-photo: url(...) */
  --sf-veil: color-mix(in srgb, var(--paper, #F7F3EA) 86%, transparent);
}
.sf-lawn { background: var(--sf-lawn) } .sf-deck { background: var(--sf-deck) } .sf-concrete { background: var(--sf-concrete) }
.sf-block { background: var(--sf-block) } .sf-hull { background: var(--sf-hull) } .sf-siding { background: var(--sf-siding) }
.sf-batten { background: var(--sf-batten) } .sf-limestone { background: var(--sf-limestone) } .sf-vellum { background: var(--sf-vellum) }
.sf-oak { background: var(--sf-oak) } .sf-linen { background: var(--sf-linen) } .sf-steel { background: var(--sf-steel) }
.sf-plate { background: var(--sf-plate) } .sf-plaster { background: var(--sf-plaster) } .sf-sand { background: var(--sf-sand) }
.sf-water { background: var(--sf-water) } .sf-kraft { background: var(--sf-kraft) }
.sf-wash { background: linear-gradient(var(--sf-veil), var(--sf-veil)), var(--sf-photo, none) center / cover no-repeat, var(--paper, #F7F3EA) }