/* ═══════════════════════════════════════════════════════════
   O3BN — TEXTURE LAYER v1.0
   Analog print feel. Zero DOM impact, zero HTTP requests,
   zero JS. Nothing here touches semantic markup or schema.
   Load AFTER shared.css.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. GRAIN ────────────────────────────────────────────────
   SVG turbulence as an inline data URI — no request, no image
   file, no layout shift. Sits above everything, catches nothing. */

body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grainshift 720ms steps(1) infinite;
}

@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Heavier grain on dark sections — film, not paper */
.post-hero::after,
.site-footer::after,
.related-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23m)'/%3E%3C/svg%3E");
}
.post-hero, .site-footer, .related-section { position: relative; }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}


/* ── 2. OFF-REGISTER RULES ───────────────────────────────────
   Misprint. The second pass didn't line up. */

.section-rule::after {
  position: relative;
  box-shadow: 0 2px 0 -1px rgba(216,90,48,0.55);
}

.post-body h2 {
  position: relative;
}
.post-body h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 46px;
  height: 3px;
  background: var(--coral);
  transform: translateX(2px) rotate(-0.4deg);
}


/* ── 3. DISPLAY TYPE — LET IT RUN BIG ────────────────────────
   Poster scale. Tighter tracking, slight optical overhang. */

.post-title {
  font-size: clamp(38px, 6.4vw, 78px) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.022em;
  margin-left: -2px;
}

.post-hero .post-tag {
  transform: rotate(-0.5deg);
  transform-origin: left center;
}

.nav-logo-text,
.footer-logo-wordmark {
  text-shadow: 1.5px 0 0 rgba(216,90,48,0.28);
}


/* ── 4. INK BLEED ON BODY COPY ───────────────────────────────
   Barely perceptible. Reads as printed rather than rendered. */

.post-body > p {
  text-shadow: 0 0 0.42px rgba(8,8,8,0.22);
}
.post-hero .post-deck {
  text-shadow: 0 0 0.55px rgba(242,240,234,0.18);
}


/* ── 5. PULL QUOTE — TORN MARGIN ─────────────────────────────
   Double rule, off-register, like a cut-out taped in. */

.pull-quote {
  position: relative;
  padding-left: 32px !important;
}
.pull-quote::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--coral);
  opacity: 0.5;
  transform: rotate(0.5deg);
}


/* ── 6. ANSWER BLOCK — STAMPED ───────────────────────────────
   Reads like a rubber stamp on a document, not a UI callout. */

.answer-block {
  position: relative;
  box-shadow: 3px 3px 0 rgba(127,119,221,0.14);
}
.answer-label {
  transform: rotate(-0.6deg);
  transform-origin: left center;
}


/* ── 7. HALFTONE — OPT-IN ────────────────────────────────────
   Add class="halftone" to any dark section for dot-screen
   texture. Newsprint enlargement. */

.halftone { position: relative; }
.halftone::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: radial-gradient(circle at center, var(--white) 0.9px, transparent 1px);
  background-size: 4px 4px;
}


/* ── 8. LINK UNDERLINE — HAND-DRAWN WEIGHT ───────────────────
   Thicker, sitting lower, slightly warm. */

.post-body p > a,
.post-body li > a {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(127,119,221,0.45);
  transition: box-shadow 0.18s, color 0.18s;
}
.post-body p > a:hover,
.post-body li > a:hover {
  box-shadow: inset 0 -0.75em 0 rgba(127,119,221,0.22);
  color: var(--black);
}


/* ── 9. CARD EDGES — PRINTED, NOT RENDERED ───────────────────
   Hard offset shadow. No blur. No soft UI drop shadow. */

.article-card,
.sidebar-item,
.related-card,
.dir-entry {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.article-card:hover,
.dir-entry:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(216,90,48,0.30);
}
.related-card:hover,
.sidebar-item:hover {
  transform: translate(-2px, -2px);
}


/* ── 10. TABLE — LEDGER ──────────────────────────────────────
   Accounting paper, not a dashboard. */

table.data caption { transform: rotate(-0.4deg); transform-origin: left center; }
table.data th { border-bottom-width: 2.5px !important; }


@media (max-width: 900px) {
  .post-title { margin-left: 0; }
  .post-body h2::after { width: 36px; }
  body::after { opacity: 0.035; }
}