/* ═══════════════════════════════════════════════════════════
   TEXTURES.CSS — "PRINTED ON PAPER" FEEL
   Heavy paper grain, grunge, halftone & fiber everywhere
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS VARS for texture intensity ─────────────────────── */
:root {
  --grain-opacity:       0.18;
  --paper-fiber-opacity: 0.07;
  --halftone-size:       5px;
  --grunge-opacity:      0.12;
}

/* ═══════════════════════════════════════════════════════════
   1. GLOBAL FILM GRAIN (animated, topmost layer)
   ═══════════════════════════════════════════════════════════ */
.global-grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  /* feTurbulence fractal noise as SVG data-URI */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: var(--grain-opacity);
  animation: grain-shift 0.35s steps(1) infinite;
}

@keyframes grain-shift {
  0%   { background-position:   0%    0%; }
  14%  { background-position: -8%   12%; }
  28%  { background-position:  18%  -14%; }
  42%  { background-position: -5%    7%; }
  57%  { background-position:  11%   18%; }
  71%  { background-position: -18%  -6%; }
  85%  { background-position:   6%  -11%; }
  100% { background-position:   0%    0%; }
}

/* ═══════════════════════════════════════════════════════════
   2. GLOBAL PAPER FIBER BASE — sits under everything
      Uses two crossed fine-line patterns to fake paper fiber
   ═══════════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* horizontal fibers */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.018) 3px,
      rgba(255,255,255,0.018) 4px
    ),
    /* vertical fibers */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 5px,
      rgba(255,255,255,0.012) 5px,
      rgba(255,255,255,0.012) 6px
    ),
    /* diagonal cross-fibers */
    repeating-linear-gradient(
      33deg,
      transparent,
      transparent 9px,
      rgba(255,255,255,0.008) 9px,
      rgba(255,255,255,0.008) 10px
    );
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   3. HALFTONE OVERLAY — risograph/silkscreen feel
   ═══════════════════════════════════════════════════════════ */
.halftone-overlay {
  position: relative;
}

.halftone-overlay::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: '';
  background: radial-gradient(circle, rgba(255,255,255,0.09) 30%, transparent 31%) 0 0 / var(--halftone-size) var(--halftone-size);
  mix-blend-mode: screen;
  opacity: 0.7;
  transition: opacity var(--transition-smooth);
}

.halftone-overlay:hover::before,
.halftone-overlay.halftone-clear::before {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════
   4. TORN PAPER EDGES (clip-path)
   ═══════════════════════════════════════════════════════════ */
.torn-paper {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 95%,
    97% 93%, 95% 96%, 92% 94%, 90% 97%,
    87% 93%, 85% 96%, 82% 94%, 80% 97%,
    77% 93%, 75% 96%, 72% 94%, 70% 97%,
    67% 93%, 65% 96%, 62% 94%, 60% 97%,
    57% 93%, 55% 96%, 52% 94%, 50% 97%,
    47% 93%, 45% 96%, 42% 94%, 40% 97%,
    37% 93%, 35% 96%, 32% 94%, 30% 97%,
    27% 93%, 25% 96%, 22% 94%, 20% 97%,
    17% 93%, 15% 96%, 12% 94%, 10% 97%,
    7% 93%, 5% 96%, 2% 94%, 0% 97%
  );
}

.torn-paper--v2 {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 96%,
    96% 92%, 93% 97%, 89% 93%, 86% 98%,
    82% 94%, 79% 97%, 75% 93%, 72% 98%,
    68% 94%, 65% 97%, 61% 93%, 58% 98%,
    54% 94%, 51% 97%, 47% 93%, 44% 98%,
    40% 94%, 37% 97%, 33% 93%, 30% 98%,
    26% 94%, 23% 97%, 19% 93%, 16% 98%,
    12% 94%, 9% 97%, 5% 93%, 2% 98%, 0% 95%
  );
}

/* ═══════════════════════════════════════════════════════════
   5. SCANLINES — subtle CRT horizontal lines
   ═══════════════════════════════════════════════════════════ */
.scanlines {
  position: relative;
}

.scanlines::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  content: '';
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.014) 0px,
    rgba(255,255,255,0.014) 1px,
    transparent 1px,
    transparent 4px
  );
}

/* ═══════════════════════════════════════════════════════════
   6. SCANLINE OVERLAY (transition flash)
   ═══════════════════════════════════════════════════════════ */
#scanline-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
}

#scanline-overlay.active {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   7. EDITORIAL RULE LINES
   ═══════════════════════════════════════════════════════════ */
.editorial-rules {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 79px,
      rgba(255,255,255,0.04) 79px,
      rgba(255,255,255,0.04) 80px
    );
}

/* ═══════════════════════════════════════════════════════════
   8. REGISTRATION MARKS (print decorative)
   ═══════════════════════════════════════════════════════════ */
.reg-mark {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  color: var(--midnight-blue);
  opacity: 0.25;
}

.reg-mark::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.reg-mark::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  background: currentColor;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* ═══════════════════════════════════════════════════════════
   9. TICKER SCROLL BAR
   ═══════════════════════════════════════════════════════════ */
.ticker-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 0;
  z-index: 20;
  pointer-events: none;
}

.ticker {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: ticker-scroll 28s linear infinite;
  font-family: var(--font-accent);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--midnight-blue);
  opacity: 0.65;
  text-transform: uppercase;
  white-space: nowrap;
  align-items: center;
}

.ticker__sep {
  color: var(--deep-navy);
  opacity: 1;
  font-size: 0.8rem;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════
   10. SECTION TEXTURE OVERLAYS
   ═══════════════════════════════════════════════════════════ */
.texture-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── 10a. Dots grid (Hero) ─────────────────────────────── */
.texture-overlay--dots {
  background-image: radial-gradient(rgba(255,255,255,0.055) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* ── 10b. Blueprint grid (Strategy) ───────────────────── */
.texture-overlay--blueprint {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

.texture-overlay--blueprint::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 6%;
  width: 1px;
  background: rgba(255,255,255,0.06);
}

.texture-overlay--blueprint::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 6%;
  width: 1px;
  background: rgba(255,255,255,0.06);
}

/* ── 10c. Diagonal mesh (Vault) ───────────────────────── */
.texture-overlay--mesh {
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 6px);
}

/* ── 10d. Large halftone (CTA) ───────────────────────── */
.texture-overlay--halftone {
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 18%, transparent 19%);
  background-size: 14px 14px;
}

/* ── 10e. Paper fiber cross-hatch (ALL sections) ─────── */
.texture-overlay--paper {
  background-image:
    repeating-linear-gradient(
      46deg,
      rgba(255,255,255,0.28) 0px,
      rgba(255,255,255,0.28) 1px,
      transparent 1px,
      transparent 11px
    ),
    repeating-linear-gradient(
      -44deg,
      rgba(255,255,255,0.22) 0px,
      rgba(255,255,255,0.22) 1px,
      transparent 1px,
      transparent 15px
    );
  opacity: 0.06;
}

/* ── 10f. Grunge blotch (new: Hero + CTA) ────────────── */
.texture-overlay--grunge {
  /* SVG turbulence encoded as data-URI — gives rough inkbleed look */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035' numOctaves='5' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='12' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23ffffff' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: var(--grunge-opacity);
}

/* ── 10g. Stochastic halftone dots (new: Strategy) ────── */
.texture-overlay--halftone-fine {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 22%, transparent 23%),
    radial-gradient(circle, rgba(255,255,255,0.04) 14%, transparent 15%);
  background-size: 8px 8px, 8px 8px;
  background-position: 0 0, 4px 4px;
}

/* ── 10h. Newsprint halftone (new: Vault) ────────────── */
.texture-overlay--newsprint {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.06) 28%, transparent 29%);
  background-size: 10px 10px;
  mix-blend-mode: screen;
}

/* ── 10i. Video halftone overlay for sections ────────── */
.texture-overlay--halftone-video {
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 30%, transparent 31%);
  background-size: var(--halftone-size) var(--halftone-size);
  mix-blend-mode: screen;
  opacity: 0.7;
  transition: opacity var(--transition-smooth);
}

.section:hover .texture-overlay--halftone-video {
  opacity: 0;
}


/* ═══════════════════════════════════════════════════════════
   11. PRINT CROP MARKS
   ═══════════════════════════════════════════════════════════ */
.crop-mark {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
  z-index: 2;
}

.crop-mark--tl { top: clamp(15px, 2.5vw, 30px); left:  clamp(15px, 2.5vw, 30px); border-right: none; border-bottom: none; }
.crop-mark--tr { top: clamp(15px, 2.5vw, 30px); right: clamp(15px, 2.5vw, 30px); border-left:  none; border-bottom: none; }
.crop-mark--bl { bottom: clamp(15px, 2.5vw, 30px); left:  clamp(15px, 2.5vw, 30px); border-right: none; border-top: none; }
.crop-mark--br { bottom: clamp(15px, 2.5vw, 30px); right: clamp(15px, 2.5vw, 30px); border-left:  none; border-top: none; }

/* ═══════════════════════════════════════════════════════════
   12. TORN DIVIDERS (between sections)
   ═══════════════════════════════════════════════════════════ */
.torn-divider {
  position: relative;
  width: 100%;
  height: 36px;
  margin-top: -18px;
  margin-bottom: -18px;
  pointer-events: none;
  z-index: 15;
}

.torn-divider--electric-blue  { background-color: var(--electric-blue); }
.torn-divider--cyan-blue       { background-color: var(--cyan-blue); }
.torn-divider--midnight-blue   { background-color: var(--midnight-blue); }

.torn-divider--shape-a {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 65%, 98% 85%, 96% 70%, 94% 80%, 92% 65%, 90% 82%,
    88% 70%, 86% 75%, 84% 65%, 82% 85%, 80% 70%, 78% 80%,
    76% 65%, 74% 83%, 72% 70%, 70% 75%, 68% 65%, 66% 85%,
    64% 70%, 62% 80%, 60% 65%, 58% 83%, 56% 70%, 54% 75%,
    52% 65%, 50% 85%, 48% 70%, 46% 80%, 44% 65%, 42% 83%,
    40% 70%, 38% 75%, 36% 65%, 34% 85%, 32% 70%, 30% 80%,
    28% 65%, 26% 83%, 24% 70%, 22% 75%, 20% 65%, 18% 85%,
    16% 70%, 14% 80%, 12% 65%, 10% 83%, 8% 70%, 6% 75%,
    4% 65%, 2% 85%, 0% 65%
  );
}

.torn-divider--shape-b {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 75%, 97% 60%, 94% 85%, 91% 65%, 88% 80%, 85% 55%,
    82% 83%, 79% 68%, 76% 75%, 73% 60%, 70% 85%, 67% 65%,
    64% 80%, 61% 55%, 58% 83%, 55% 68%, 52% 75%, 49% 60%,
    46% 85%, 43% 65%, 40% 80%, 37% 55%, 34% 83%, 31% 68%,
    28% 75%, 25% 60%, 22% 85%, 19% 65%, 16% 80%, 13% 55%,
    10% 83%, 7% 68%, 4% 75%, 0% 60%
  );
}

/* ═══════════════════════════════════════════════════════════
   13. PAPER TEXTURE — per-section pseudo-element overlays
       Each section gets its own paper layer via ::after
   ═══════════════════════════════════════════════════════════ */

/* Base rule — all sections get it */
.section {
  position: relative;
}

/* A: Paper fiber criss-cross on every section */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    /* horizontal ruled lines — like old paper notebook */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgba(255,255,255,0.025) 23px,
      rgba(255,255,255,0.025) 24px
    ),
    /* slight vertical fiber */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 41px,
      rgba(255,255,255,0.015) 41px,
      rgba(255,255,255,0.015) 42px
    );
  mix-blend-mode: overlay;
}

/* B: Large-grain grunge on every section */
.section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  background-repeat: repeat;
  opacity: 0.055;
  mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════════════════
   14. HALFTONE — section-specific strong overlays
   ═══════════════════════════════════════════════════════════ */

/* Hero: large scattered dots */
.section--hero .texture-overlay--dots {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.065) 2px, transparent 2px);
  background-size: 22px 22px;
}

/* Strategy (Blueprint): dark halftone dots for background, cards, and decorative bands */
.section--strategy .texture-overlay--halftone-video {
  background-image: radial-gradient(circle, rgba(2, 1, 14, 0.22) 30%, transparent 31%);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.section--strategy .process-card.halftone-overlay::before {
  background: radial-gradient(circle, rgba(2, 1, 14, 0.3) 30%, transparent 31%) 0 0 / var(--halftone-size) var(--halftone-size);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.section--strategy .halftone-band {
  background-image: radial-gradient(circle, rgba(2, 1, 14, 0.18) 25%, transparent 26%);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* CTA: staggered offset halftone grid */
.section--cta .texture-overlay--halftone {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.055) 20%, transparent 21%),
    radial-gradient(circle, rgba(255,255,255,0.035) 12%, transparent 13%);
  background-size: 16px 16px, 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* ═══════════════════════════════════════════════════════════
   15. GRUNGE STAINS — positioned blotches on sections
       Fake ink spread / water stain marks
   ═══════════════════════════════════════════════════════════ */
.grunge-stain {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 1;
  mix-blend-mode: multiply;
}

.grunge-stain--a {
  width: 320px;
  height: 220px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.18) 0%, transparent 70%);
  top: 10%;
  left: -5%;
  transform: rotate(-12deg);
}

.grunge-stain--b {
  width: 260px;
  height: 180px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.14) 0%, transparent 70%);
  bottom: 8%;
  right: -3%;
  transform: rotate(8deg);
}

.grunge-stain--c {
  width: 200px;
  height: 140px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.04) 0%, transparent 70%);
  top: 50%;
  right: 15%;
  transform: rotate(-5deg);
}

/* ═══════════════════════════════════════════════════════════
   16. PAPER EDGE BURN — dark vignette on section edges
       Simulates aged/burned paper corners
   ═══════════════════════════════════════════════════════════ */
.paper-burn {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(0,0,0,0.28) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 0%, rgba(0,0,0,0.22) 0%, transparent 40%),
    radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.20) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.25) 0%, transparent 45%);
}

/* ═══════════════════════════════════════════════════════════
   17. RISOGRAPH OFFSET — colored offset misprint shadow
       Adds a slight blue color offset to headings
   ═══════════════════════════════════════════════════════════ */
.riso-offset {
  position: relative;
}

.riso-offset::before {
  content: attr(data-text);
  position: absolute;
  top: 2px;
  left: 3px;
  color: var(--cyan-blue);
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}

/* ═══════════════════════════════════════════════════════════
   18. INK BLEED BORDER — rough inky outline on cards
   ═══════════════════════════════════════════════════════════ */
.ink-bleed {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 2px 2px 0 rgba(255,255,255,0.04),
    inset -1px -1px 0 rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════════════
   19. FULL-PAGE PAPER TEXTURE WRAPPER
       A second fixed layer with coarser paper noise — 
       more visible, always present
   ═══════════════════════════════════════════════════════════ */
.global-paper {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  /* Coarser turbulence — cotton paper feel */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.055;
  animation: paper-drift 1.8s steps(1) infinite;
}

@keyframes paper-drift {
  0%   { background-position:  0px   0px; }
  33%  { background-position: -4px   6px; }
  66%  { background-position:  7px  -3px; }
  100% { background-position:  0px   0px; }
}

/* ═══════════════════════════════════════════════════════════
   20. HALFTONE STRIPE BANDS
       Horizontal bands of halftone dots — newspaper feel
   ═══════════════════════════════════════════════════════════ */
.halftone-band {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 4;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.055) 25%, transparent 26%);
  background-size: 9px 9px;
  mix-blend-mode: screen;
  opacity: 0.6;
}

.halftone-band--top    { top: 0; }
.halftone-band--bottom { bottom: 0; }

/* Fade the band edges */
.halftone-band--top {
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

.halftone-band--bottom {
  mask-image: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════
   21. PAPER CREASE LINES — diagonal wrinkle marks
   ═══════════════════════════════════════════════════════════ */
.paper-crease {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      72deg,
      transparent,
      transparent 180px,
      rgba(255,255,255,0.022) 180px,
      rgba(255,255,255,0.022) 181px
    ),
    repeating-linear-gradient(
      -68deg,
      transparent,
      transparent 240px,
      rgba(0,0,0,0.035) 240px,
      rgba(0,0,0,0.035) 241px
    );
}

/* ═══════════════════════════════════════════════════════════
   22. NEWSPAPER COLUMN RULE OVERLAY
       Thin vertical lines — mimics newspaper column gutters
   ═══════════════════════════════════════════════════════════ */
.column-rules {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(25% - 1px),
      rgba(255,255,255,0.03) calc(25% - 1px),
      rgba(255,255,255,0.03) 25%
    );
}