/* ============================================================
   ULSE B&W — High contrast monochrome with subtle glow
   Customize via CSS vars:
     --ulse-bw-primary: accent (default #000)
     --ulse-bw-secondary: secondary accent (default #444)
     --ulse-bw-text: base text color (default #111)
============================================================ */

.ulse-bw {
  --ulse-bw-primary: #000;
  --ulse-bw-secondary: #444;
  --ulse-bw-text: #111;
  --ulse-bw-line: rgba(0,0,0,0.9);

  font-family: "Inter", Arial, sans-serif;
  color: var(--ulse-bw-text);
  max-width: 1100px;
  margin: 32px auto;
  padding: 48px 42px 48px 80px; /* extra left room for enlarged triple lines */
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,240,240,0.8));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.ulse-bw::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(
    from 45deg,
    rgba(255,255,255,0.12),
    rgba(0,0,0,0.08),
    rgba(255,255,255,0.12)
  );
  mix-blend-mode: soft-light;
  opacity: 0.35;
  z-index: 0;
  animation: bwGlow 14s linear infinite;
}

@keyframes bwGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ulse-bw > * {
  position: relative;
  z-index: 1;
  text-shadow:
    0 1px 1px rgba(255,255,255,0.45),
    0 1px 3px rgba(0,0,0,0.45);
  line-height: 1.85;
}

.ulse-bw h1,
.ulse-bw h2,
.ulse-bw h3 {
  margin: 0 0 18px 0;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--ulse-bw-primary);
  text-shadow:
    0 2px 6px rgba(0,0,0,0.55),
    0 0 10px rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 8px;
}

.ulse-bw p {
  margin: 0 0 16px 0;
}

/* Vertical triple lines on the right side */
.ulse-bw::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 28px;
  width: 30px;
  background: linear-gradient(
    to right,
    var(--ulse-bw-line) 0px,
    var(--ulse-bw-line) 7px,
    transparent 7px,
    transparent 11px,
    var(--ulse-bw-line) 11px,
    var(--ulse-bw-line) 18px,
    transparent 18px,
    transparent 22px,
    var(--ulse-bw-line) 22px,
    var(--ulse-bw-line) 29px,
    transparent 29px,
    transparent 30px
  );
  opacity: 0.85;
  z-index: 0;
}

.ulse-bw strong,
.ulse-bw b {
  color: var(--ulse-bw-primary);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.6),
    0 0 6px rgba(255,255,255,0.35);
}

.ulse-bw a {
  color: var(--ulse-bw-primary);
  text-decoration: none;
  font-weight: 700;
  box-shadow: inset 0 -1px 0 var(--ulse-bw-secondary);
  transition: color 0.2s ease, box-shadow 0.2s ease, text-shadow 0.2s ease;
}

.ulse-bw a:hover {
  color: var(--ulse-bw-secondary);
  text-shadow:
    0 0 6px rgba(0,0,0,0.4),
    0 0 8px rgba(255,255,255,0.3);
  box-shadow:
    inset 0 -2px 0 var(--ulse-bw-primary),
    0 4px 14px rgba(0,0,0,0.2);
}

/* Alternate tint per paragraph inside full */
.ulse-bw p:nth-of-type(even) {
  background: linear-gradient(90deg, rgba(0,0,0,0.04), transparent);
  padding: 6px 8px;
  border-radius: 8px;
}