:root{
  --bg:#0b0f14; --fg:#e6edf3; --muted:#8aa0b3; --brand:#6ee7ff; --accent:#a78bfa;
  --pipe-w: 44px;         /* pipe thickness */
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:16px/1.5 system-ui,Segoe UI,Roboto,Arial;
}

/* Keep content clear of pipes */
body{
  padding-left: var(--pipe-w);
  padding-right: var(--pipe-w);
  min-height:100vh;
  position: relative;     /* create stacking context */
  background-color:#0b1016; /* your dark */
}

/* Ensure content sits above the decorative pipes */
.site-header,.container,.site-footer{
  position: relative;
  z-index: 1;
}

/* CSS-only vertical pipes: left & right */
body::before,
body::after{
  content:"";
  position: fixed;
  top:0; bottom:0;
  width: var(--pipe-w);
  pointer-events: none;   /* don’t block clicks */
  z-index: 0;

  /* Pipe look: mottled rust + subtle seam */
  background-image:
    radial-gradient(120% 50% at 30% 30%, #7a3e2a 0%, #4a1f14 70%),
    linear-gradient(90deg, rgba(0,0,0,.25) 0, rgba(255,255,255,.08) 50%, rgba(0,0,0,.35) 100%);
  background-repeat: repeat-y, repeat-y;
  background-size: var(--pipe-w) 82px, var(--pipe-w) 100%;
  box-shadow:
    inset -4px 0 6px rgba(0,0,0,.6),   /* inner shade (left edge)  */
    inset  4px 0 4px rgba(255,255,255,.08), /* inner highlight (right edge) */
    0 0 12px rgba(0,0,0,.8);           /* outer shadow to lift off bg */
}

body::before{ left:0; }
body::after { right:0; }

/* Optional: narrower pipes or hide on small screens */
@media (max-width: 720px){
  :root{ --pipe-w: 24px; }
}
@media (max-width: 480px){
  :root{ --pipe-w: 0px; }           /* effectively hides them */
  body{ padding-left:0; padding-right:0; }
}