/* Align Newsroom — collage treatment recipe (ink + collage).
   Utilities for the signature image treatment. Requires design-tokens.css. */

/* ---------- torn edges (deterministic clip-paths) ---------- */
.nr-torn-top {
  clip-path: polygon(0 14px, 4% 6px, 9% 12px, 15% 4px, 21% 11px, 28% 5px,
    34% 13px, 41% 6px, 48% 12px, 55% 4px, 62% 11px, 69% 5px, 76% 13px,
    83% 6px, 90% 12px, 96% 5px, 100% 11px, 100% 100%, 0 100%);
}
.nr-torn-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), 96% calc(100% - 5px),
    90% calc(100% - 12px), 83% calc(100% - 6px), 76% calc(100% - 13px),
    69% calc(100% - 5px), 62% calc(100% - 11px), 55% calc(100% - 4px),
    48% calc(100% - 12px), 41% calc(100% - 6px), 34% calc(100% - 13px),
    28% calc(100% - 5px), 21% calc(100% - 11px), 15% calc(100% - 4px),
    9% calc(100% - 12px), 4% calc(100% - 6px), 0 calc(100% - 14px));
}
.nr-torn-y { /* torn top + bottom, the classic story-image cut */
  clip-path: polygon(0 14px, 4% 6px, 9% 12px, 15% 4px, 21% 11px, 28% 5px,
    34% 13px, 41% 6px, 48% 12px, 55% 4px, 62% 11px, 69% 5px, 76% 13px,
    83% 6px, 90% 12px, 96% 5px, 100% 11px, 100% calc(100% - 11px),
    96% calc(100% - 5px), 90% calc(100% - 12px), 83% calc(100% - 6px),
    76% calc(100% - 13px), 69% calc(100% - 5px), 62% calc(100% - 11px),
    55% calc(100% - 4px), 48% calc(100% - 12px), 41% calc(100% - 6px),
    34% calc(100% - 13px), 28% calc(100% - 5px), 21% calc(100% - 11px),
    15% calc(100% - 4px), 9% calc(100% - 12px), 4% calc(100% - 6px),
    0 calc(100% - 14px));
}

/* ---------- torn photographic mask for image blocks ---------- */
.nr-tornimg {
  -webkit-mask-image: var(--nr-tex-torn-red);
  mask-image: var(--nr-tex-torn-red);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---------- duotone / engraved photo treatment ---------- */
.nr-duotone {
  filter: grayscale(1) sepia(0.28) contrast(1.12) brightness(0.98);
}
.nr-duotone-navy {
  filter: grayscale(1) sepia(0.55) hue-rotate(185deg) saturate(1.6)
    contrast(1.1) brightness(0.94);
}
.nr-duotone-red {
  filter: grayscale(1) sepia(0.7) hue-rotate(-32deg) saturate(2.1)
    contrast(1.08) brightness(0.96);
}

/* ---------- accent blob behind portraits ---------- */
.nr-blob-wrap { position: relative; display: inline-block; }
.nr-blob {
  position: absolute;
  width: 130%; height: 120%;
  left: -18%; top: -8%;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}
.nr-blob-red { background: var(--nr-red); }
.nr-blob-navy { background: var(--nr-navy); }
.nr-blob-mustard { background: var(--nr-mustard); }
.nr-blob-photo-red { background: var(--nr-tex-blob-red) center/contain no-repeat; }
.nr-blob-photo-navy { background: var(--nr-tex-blob-navy) center/contain no-repeat; }
.nr-blob-photo-mustard { background: var(--nr-tex-blob-mustard) center/contain no-repeat; }
.nr-blob-wrap > :not(.nr-blob) { position: relative; z-index: 1; }

/* ---------- tape strip ("New this month") ---------- */
.nr-tape {
  display: inline-block;
  font-family: var(--nr-font-mono);
  font-size: var(--nr-type-small);
  letter-spacing: 0.04em;
  color: var(--nr-ink);
  background: var(--nr-mustard);
  background-image: var(--nr-tex-grain);
  background-blend-mode: multiply;
  padding: 0.35em 1.1em;
  transform: rotate(-2deg);
  box-shadow: var(--nr-shadow-tape);
  position: relative;
}
.nr-tape::before, .nr-tape::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 8px;
  background: inherit;
}
.nr-tape::before { left: -6px; clip-path: polygon(100% 0, 100% 100%, 30% 85%, 60% 60%, 20% 40%, 55% 15%); }
.nr-tape::after { right: -6px; clip-path: polygon(0 0, 0 100%, 70% 85%, 40% 60%, 80% 40%, 45% 15%); }

/* ---------- torn section label ---------- */
.nr-kicker {
  display: inline-block;
  font-family: var(--nr-font-mono);
  font-size: var(--nr-type-kicker);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nr-paper);
  background: var(--nr-ink);
  padding: 0.5em 1.2em;
}
.nr-kicker-red { background: var(--nr-red); }
.nr-kicker-navy { background: var(--nr-navy); }
.nr-kicker-mustard { background: var(--nr-mustard); color: var(--nr-ink); }

/* ---------- reporter avatar frame ---------- */
.nr-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--nr-ink);
  box-shadow: 2px 2px 0 var(--nr-mustard);
  background: var(--nr-paper-deep);
}
.nr-avatar-lg { width: 120px; height: 120px; }

/* ---------- divider rules ---------- */
.nr-rule-double {
  border: 0;
  border-top: 3px solid var(--nr-ink);
  position: relative;
  margin: 2rem 0;
}
.nr-rule-double::after {
  content: ""; display: block;
  border-top: 1px solid var(--nr-ink);
  margin-top: 3px;
}
.nr-rule-fade {
  border: 0; height: 1px; margin: 1.5rem 0;
  background: linear-gradient(90deg, var(--nr-ink), transparent);
}

/* ---------- halftone + grain overlays ---------- */
.nr-halftone { position: relative; }
.nr-halftone::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--nr-tex-halftone);
  background-size: 120px 120px;
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.nr-grain-page::before {
  content: ""; position: fixed; inset: 0;
  background-image: var(--nr-tex-grain);
  background-size: 512px 512px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* ---------- ink edge vignette for framed photos ---------- */
.nr-inkedge {
  box-shadow: inset 0 0 60px rgba(28, 27, 25, 0.35);
  border: 1px solid var(--nr-ink);
}

/* ---------- ink frame overlay for photos ---------- */
.nr-frame-ink { position: relative; }
.nr-frame-ink::after {
  content: ""; position: absolute; inset: 0;
  background: var(--nr-tex-ink-frame) center/100% 100% no-repeat;
  pointer-events: none;
}

/* ---------- "where they stand" axis ---------- */
.nr-axis { margin: 0.9rem 0; }
.nr-axis-row {
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--nr-font-mono);
  font-size: var(--nr-type-small);
  color: var(--nr-ink-soft);
  margin: 0.45rem 0;
}
.nr-axis-row .lo { text-align: right; }
.nr-axis-track {
  position: relative; height: 2px;
  background: var(--nr-rule);
}
.nr-axis-dot {
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--nr-ink);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--nr-paper);
}
.nr-axis-note {
  font-family: var(--nr-font-mono);
  font-size: var(--nr-type-small);
  font-style: italic;
  color: var(--nr-ink-mute);
  margin-top: 0.5rem;
}

/* ---------- masthead ---------- */
.nr-masthead {
  font-family: var(--nr-font-masthead);
  font-weight: 900;
  font-size: var(--nr-type-masthead);
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: var(--nr-ink);
  text-transform: uppercase;
}
.nr-masthead-rule {
  border: 0;
  border-top: var(--nr-rule-masthead);
  margin: 0.75rem 0 0.35rem;
}
.nr-masthead-sub {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: var(--nr-rule-section);
  padding-bottom: 0.6rem;
  font-family: var(--nr-font-mono);
  font-size: var(--nr-type-small);
  color: var(--nr-ink-soft);
}