/* ============================================================
   Licensed Brokers background system
   Print-shop textures over the acid lime palette. Every layer is
   CSS or one small canvas: no images, no libraries.

   Layer order, bottom to top:
     0  page tone           body background colour
     1  halftone dots       fixed, whole page
     2  precision grid      per section, engraved feel
     3  section texture     dots / rules / ledger lines / stripes
     4  vignette + noise    fixed, ties the tones together
     5  content
   ============================================================ */

:root{
  /* the print-shop textures */
  --dot-ink:rgba(226,184,72,.115);
  --dot-gap:6px;
  --grid-ink:rgba(226,184,72,.075);
  --grid-gap:64px;
  --rule-ink:rgba(226,184,72,.14);
  --paper-ink:rgba(30,22,14,.115);
  --hazard-a:#e2b848;
  --hazard-b:#0a0d13;
}

/* ---------- 0/1 page tone + halftone --------------------------------- */
/* The dot field is the base texture of the whole site. It sits behind
   everything at a fixed position, so scrolling moves the content across
   a stationary screen rather than dragging the texture along with it. */
body{
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot-ink) 1px, transparent 0);
  background-size:var(--dot-gap) var(--dot-gap);
  background-attachment:fixed;
}

/* ---------- 4 vignette + film grain ---------------------------------- */
/* Two fixed overlays that never take pointer events. The grain is an
   inline SVG turbulence: about 200 bytes, no network request, and it
   stops large flat areas from banding on cheap panels. */
.bg-grain,
.bg-vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.bg-grain{
  opacity:.075;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-vignette{
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,.42) 100%),
    radial-gradient(100% 60% at 50% 100%, transparent 45%, rgba(0,0,0,.30) 100%);
}

.hero{position:relative; isolation:isolate}

/* content must ride above the fixed layers */
.wrap, .nav, .sec, footer, .strip{position:relative; z-index:1}

/* ---------- 2 precision grid ----------------------------------------- */
/* Engraved measuring grid, per section rather than global: a section can
   opt out, and the fade means it reads as an edge treatment instead of
   graph paper. */
.sec{position:relative; isolation:isolate}
.sec::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size:var(--grid-gap) var(--grid-gap);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---------- 3 section textures --------------------------------------- */

/* deep: tighter dots, darker plate, a lit horizon at the top edge */
.sec.deep{background:var(--deep)}
.sec.deep::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:radial-gradient(rgba(226,184,72,.15) 1px, transparent 0);
  background-size:4px 4px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%, #000, transparent 72%);
          mask-image:radial-gradient(90% 70% at 50% 0%, #000, transparent 72%);
}

/* paper: the light plate. Ledger rules plus its own halftone, inked dark
   on cream rather than lime on black, so the texture reads on both tones. */
.sec.paper{background:var(--paper); color:var(--ink)}
.sec.paper::before{
  background-image:
    linear-gradient(rgba(30,22,14,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,22,14,.10) 1px, transparent 1px);
}
.sec.paper::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 27px, var(--paper-ink) 27px, var(--paper-ink) 28px),
    radial-gradient(rgba(30,22,14,.09) 1px, transparent 0);
  background-size:auto, 5px 5px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---------- hazard tape ---------------------------------------------- */
/* The diagonal stripe from a trading floor edge marking. Used as a 6px
   rule between major sections. */
.hazard{
  height:6px;
  width:100%;
  background-image:repeating-linear-gradient(-45deg,
    var(--hazard-a), var(--hazard-a) 5px,
    var(--hazard-b) 5px, var(--hazard-b) 10px);
  opacity:.55;
  position:relative;
  z-index:1;
}
.hazard.thin{height:3px; opacity:.4}

/* ---------- measuring rule ------------------------------------------- */
/* Tick marks like the edge of a ruler. Sits under a section heading and
   gives the eye a horizontal beat. */
.rule-ticks{
  height:14px;
  width:100%;
  background-image:repeating-linear-gradient(90deg,
    transparent, transparent calc(2.5% - 1px),
    var(--rule-ink) calc(2.5% - 1px), var(--rule-ink) 2.5%);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
  margin-top:10px;
}
.sec.paper .rule-ticks{--rule-ink:rgba(11,13,8,.2)}

/* ---------- ticker tape ---------------------------------------------- */
/* A perforated strip, like the paper tape a ticker prints onto. Pure CSS
   circles punched along both edges. */
.tape{
  position:relative;
  background:var(--card);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.tape::before,
.tape::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:7px;
  background-image:radial-gradient(circle at 4px 3.5px, var(--bg) 2.6px, transparent 2.7px);
  background-size:13px 7px;
  pointer-events:none;
  z-index:2;
}
.tape::before{top:0}
.tape::after{bottom:0}

/* ---------- plate edge glow ------------------------------------------ */
/* A thin lit line where two plates meet, so section joins read as
   deliberate rather than as a colour change. */
.sec + .sec{border-top:1px solid var(--line)}
.sec.deep{
  box-shadow:inset 0 1px 0 rgba(226,184,72,.14), inset 0 -1px 0 rgba(226,184,72,.07);
}

/* ---------- canvas backdrop ------------------------------------------ */
/* The hero's live layer. Fixed behind the hero only, and removed on
   small screens by anim.js rather than merely hidden, so a phone never
   pays for a canvas it cannot see. */
#bgfx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
  opacity:.9;
}

/* ---------- corner registration marks -------------------------------- */
/* Printer's crop marks at the corners of a section. Decorative, but they
   are the detail that makes the page read as printed matter. */
.regmark{
  position:absolute;
  width:14px;
  height:14px;
  pointer-events:none;
  opacity:.4;
  z-index:1;
}
.regmark::before,
.regmark::after{
  content:"";
  position:absolute;
  background:var(--acid);
}
.regmark::before{left:0; top:6px; width:14px; height:1px}
.regmark::after{top:0; left:6px; width:1px; height:14px}
.regmark.tl{top:14px; left:14px}
.regmark.tr{top:14px; right:14px}
.regmark.bl{bottom:14px; left:14px}
.regmark.br{bottom:14px; right:14px}
.sec.paper .regmark::before,
.sec.paper .regmark::after{background:var(--ink)}

/* ---------- reduced motion + small screens --------------------------- */
@media (prefers-reduced-motion:reduce){
  #bgfx{display:none}
  .bg-grain{opacity:.02}
}
@media (max-width:900px){
  /* The fixed attachment is the expensive part on mobile: every scroll
     frame repaints the whole background. Scrolling with the content is
     cheap and looks the same at this size. */
  body{background-attachment:scroll}
  :root{--grid-gap:44px; --dot-gap:5px}
  .regmark{display:none}
}