/* ============================================================
   ULSE W&B — High contrast monochrome with subtle glow
   (white background, black text/lines)
============================================================ */

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

  font-family: "Inter", Arial, sans-serif;
  color: var(--ulse-wb-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-wb::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: wbGlow 14s linear infinite;
}

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

.ulse-wb > * {
  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-wb h1,
.ulse-wb h2,
.ulse-wb h3 {
  margin: 0 0 18px 0;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--ulse-wb-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-wb p {
  margin: 0 0 16px 0;
}

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

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

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

.ulse-wb a:hover {
  color: var(--ulse-wb-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-wb-primary),
    0 4px 14px rgba(0,0,0,0.2);
}

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