/* Trendz TZ-49 — face wash gutters + protect shared top-nav spacing on Icons posts */
:root {
  --tz-void: #0c0a10;
  --tz-paper: #f3f0f7;
  --tz-muted: rgba(243, 240, 247, 0.68);
  --tz-faint: rgba(243, 240, 247, 0.45);
  --tz-line: rgba(255, 255, 255, 0.1);
  --tz-font-display: "Syne", sans-serif;
  --tz-font-body: "Outfit", sans-serif;
  --tz-l1: #ff3d9a;
  --tz-l2: #ff7a3d;
  --tz-l3: #ffe14a;
  --tz-l4: #5dff9a;
  --tz-l5: #4ecbff;
  --tz-l6: #8b5cff;
  --tz-dot: #fff0a8;
}

*,
*::before,
*::after { box-sizing: border-box; }

body.trendz-page {
  margin: 0;
  min-height: 100vh;
  background: var(--tz-void);
  color: var(--tz-paper);
  font-family: var(--tz-font-body);
  -webkit-font-smoothing: antialiased;
}

body.trendz-page::before,
body.trendz-page .grain,
body.trendz-page .starfield,
body.trendz-page .ambient,
body.trendz-page .aurora-sky {
  display: none !important;
}

.trendz-page .site-nav {
  position: relative;
  z-index: 200;
  background: rgba(12, 10, 16, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tz-line);
  /* Match shared.css shell — Icons people posts used to inline-override these */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  height: var(--nav-h);
  padding: 0 clamp(var(--space-5), 4vw, 52px);
  gap: 0;
}

/* Desktop: keep shared gap + uppercase tracking (beats article inline .site-nav rules) */
@media (min-width: 1101px) {
  .trendz-page .site-nav .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(var(--space-3), 2vw, var(--space-8));
  }
  .trendz-page .site-nav .nav-links a {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding: var(--space-2) 0;
  }
}

.trendz-page .nav-logo,
.trendz-page .nav-links a:not(.nav-tz):not([href="/trendz"]):not([href="/trendz/"]),
.trendz-page .nav-status {
  color: var(--tz-paper) !important;
}

.trendz-page .nav-links a:not(.nav-tz):not([href="/trendz"]):not([href="/trendz/"]):hover,
.trendz-page .nav-links a:not(.nav-tz):not([href="/trendz"]):not([href="/trendz/"]).active {
  color: #fff !important;
}

/* Nav TRENDZ rainbow lives in shared.css (sitewide). Page keeps hover brightness. */
.trendz-page .site-nav .nav-links a[href="/trendz"]:hover,
.trendz-page .site-nav .nav-links a[href="/trendz/"]:hover,
.trendz-page .site-nav .nav-links a.nav-tz:hover,
.trendz-page .site-nav .nav-links a[href="/trendz"][aria-current="page"],
.trendz-page .site-nav .nav-links a[href="/trendz/"][aria-current="page"],
.trendz-page .site-nav .nav-links a.nav-tz[aria-current="page"],
.trendz-page .site-nav .nav-links a.nav-tz.active {
  filter: brightness(1.15);
}

.trendz-page .nav-status {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--tz-line);
}

.trendz-page .status-dot { background: #4ecbff; }

@media (max-width: 1100px) {
  .trendz-page .nav-links { background: rgba(12, 10, 16, 0.98) !important; }
}

/* Hero — TZ-23: 14×4 full-width squares; L1–L3 clear, L4 fades into page */

.tz-hero {
  position: relative;
  z-index: 1;
  display: grid;
  overflow: hidden;
  background: #120e18;
}

.tz-hero-bg {
  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #120e18;
  display: block;
}

.tz-collage {
  display: grid;
  /* 14×4 → square cells ≈28.6vw tall (~28–36svh); no max-height clip on L1–L3 */
  grid-template-columns: repeat(14, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 2px;
  aspect-ratio: 14 / 4;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
}

/* TZ-39 — desktop gutters (~3rem each) so side marks sit on black, not photos */
@media (min-width: 901px) {
  .tz-collage {
    width: min(100%, calc(100% - 6rem));
    margin-inline: auto;
  }
}

.tz-collage img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  /* Bias slightly up so heads aren't chopped; square cell = less zoom */
  object-position: center 22%;
  filter: brightness(1.1) contrast(1.04) saturate(1.1);
  background: #1a1520;
}

/* Layer fade: L1–L3 stay readable; L4 immerses into dark page */
.tz-collage img:nth-child(n+15) {
  filter: brightness(0.96) contrast(1.03) saturate(1.05);
}
.tz-collage img:nth-child(n+29) {
  filter: brightness(0.84) contrast(1.02) saturate(1.0);
}
.tz-collage img:nth-child(n+43) {
  filter: brightness(0.42) contrast(0.98) saturate(0.82);
  opacity: 0.72;
}

.tz-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Keep rows 1–3 clear; crush only into L4 (~75–100%) */
  background:
    linear-gradient(180deg,
      rgba(12, 10, 16, 0.02) 0%,
      rgba(12, 10, 16, 0.08) 28%,
      rgba(12, 10, 16, 0.18) 52%,
      rgba(12, 10, 16, 0.38) 72%,
      rgba(12, 10, 16, 0.82) 86%,
      rgba(12, 10, 16, 0.98) 100%);
}

.tz-hero-inner {
  grid-area: 1 / 1;
  position: relative;
  z-index: 4;
  align-self: end;
  justify-self: center;
  width: min(100% - 32px, 360px);
  max-width: 360px;
  margin: 0 auto clamp(16px, 2.5vh, 28px);
  padding: 12px 14px 14px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 10, 16, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  opacity: 0;
  animation: tzFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

@keyframes tzFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.tz-brand {
  margin: 0 auto;
  font-family: var(--tz-font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}

.tz-letter {
  display: inline-block;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--tz-lc) 90%, #fff) 0%,
    var(--tz-lc) 50%,
    color-mix(in srgb, var(--tz-lc) 70%, #1a1020) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tz-letter:nth-child(1) { --tz-lc: var(--tz-l1); }
.tz-letter:nth-child(2) { --tz-lc: var(--tz-l2); }
.tz-letter:nth-child(3) { --tz-lc: var(--tz-l3); }
.tz-letter:nth-child(4) { --tz-lc: var(--tz-l4); }
.tz-letter:nth-child(5) { --tz-lc: var(--tz-l5); }
.tz-letter:nth-child(6) { --tz-lc: var(--tz-l6); }

.tz-period { display: inline-block; color: var(--tz-dot); }

.tz-lede {
  margin: 0.4rem auto 0;
  max-width: 21rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(243, 240, 247, 0.88);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.tz-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 0.7rem;
}

.tz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--tz-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}

.tz-hero-wm {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(12, 10, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(243, 240, 247, 0.92);
  font-family: var(--tz-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
}
.tz-hero-wm span { color: #00e8db; font-size: 0.62rem; vertical-align: super; }
.tz-hero-wm:hover { border-color: rgba(0,232,219,0.45); color: #fff; }

/* TZ-39 — desktop-only TRENDZ in black gutters beside collage (not on photos).
   Rainbow = same --tz-l1…l6 as nav/hero wordmark; opacity keeps it subtle on void. */
.tz-side-mark {
  display: none;
}

@media (min-width: 901px) {
  .tz-side-mark {
    display: block;
    position: absolute;
    top: 42%;
    z-index: 2;
    width: 3rem;
    margin: 0;
    padding: 0;
    pointer-events: none;
    user-select: none;
    font-family: var(--tz-font-display);
    font-weight: 800;
    /* Fit gutter (~3rem): vertical glyph advance ≈ font-size */
    font-size: clamp(1.05rem, 1.6vw, 1.55rem);
    letter-spacing: 0.28em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%);
    white-space: nowrap;
    background-image: linear-gradient(
      180deg,
      var(--tz-l1) 0%,
      var(--tz-l2) 20%,
      var(--tz-l3) 40%,
      var(--tz-l4) 60%,
      var(--tz-l5) 80%,
      var(--tz-l6) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.3;
  }

  /* Center each mark in its 3rem gutter (collage is calc(100% - 6rem) centered) */
  .tz-side-mark--left {
    left: 0;
  }

  .tz-side-mark--right {
    right: 0;
  }
}

@media (max-width: 900px) {
  .tz-side-mark { display: none !important; }
}

.tz-btn-primary {
  color: #120e18;
  background: #f3f0f7;
}

.tz-btn-primary:hover {
  transform: translateY(-2px);
  background: #fff;
}

.tz-btn-ghost {
  color: var(--tz-paper);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(12, 10, 16, 0.45);
}

.tz-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Faces of Trendz — lifestyle strip */
.tz-faces {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: -28px auto 0;
  padding: 0 clamp(20px, 5vw, 48px);
}

.tz-faces-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--tz-line);
  background: rgba(18, 14, 26, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.tz-faces-label {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tz-muted);
  white-space: nowrap;
  line-height: 1.15;
}
.tz-faces-label-l1,
.tz-faces-label-l2 { display: inline; }

.tz-faces-row {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
}

.tz-face {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 35%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 0 rgba(255, 61, 154, 0.35);
  animation: tzFacePulse 4.5s ease-in-out infinite;
  transition: transform 0.2s, border-color 0.2s;
}

.tz-face:nth-child(2) { animation-delay: 0.4s; }
.tz-face:nth-child(3) { animation-delay: 0.8s; }
.tz-face:nth-child(4) { animation-delay: 1.2s; }
.tz-face:nth-child(5) { animation-delay: 1.6s; }
.tz-face:nth-child(6) { animation-delay: 2s; }

@keyframes tzFacePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 61, 154, 0.2); transform: scale(1); }
  50% { box-shadow: 0 0 0 4px rgba(78, 203, 255, 0.18); transform: scale(1.04); }
}

/* Dense directory — comprehensive, scannable */
.tz-dir {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(36px, 5vh, 52px) clamp(20px, 5vw, 48px) 12px;
}

.tz-dir-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tz-line);
}

.tz-dir-head h2 {
  margin: 0;
  font-family: var(--tz-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tz-dir-head p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tz-muted);
}

.tz-dir-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--tz-line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.tz-dir-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  color: inherit;
  border-bottom: 1px solid var(--tz-line);
  border-right: 1px solid var(--tz-line);
  transition: background 0.2s, transform 0.25s;
  position: relative;
}

.tz-dir-main {
  display: contents;
  text-decoration: none;
  color: inherit;
}

.tz-dir-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 35%;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tz-dir-body { min-width: 0; }

.tz-dir-item:hover {
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-1px);
}

.tz-dir-item:nth-child(2n) { border-right: none; }
.tz-dir-item:nth-last-child(-n + 2) { border-bottom: none; }
.tz-dir-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-right: none;
}

.tz-dir-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.tz-dir-name {
  margin: 0;
  font-family: var(--tz-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tz-paper);
  line-height: 1.2;
}

/* Hub directory category names — soft lane tint (Icons stays paper/white). */
.tz-dir-item[data-lane]:not([data-lane="icons"]) .tz-dir-name {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--tz-h2-a), var(--tz-h2-b) 45%, var(--tz-h2-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--tz-h2-a);
  -webkit-text-fill-color: transparent;
}

.tz-dir-meta {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tz-faint);
}

.tz-dir-blurb {
  margin: 0 0 8px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--tz-muted);
}

.tz-dir-sample {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--tz-faint);
}

.tz-dir-sample em {
  font-style: normal;
  color: var(--tz-muted);
}

/* Buzz list */
.tz-buzz-block {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px clamp(20px, 5vw, 48px) clamp(64px, 10vh, 96px);
}

.tz-buzz-block h2 {
  margin: 0 0 6px;
  font-family: var(--tz-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tz-buzz-block > p {
  margin: 0 0 14px;
  color: var(--tz-muted);
  font-size: 0.88rem;
}

.tz-buzz { border-top: 1px solid var(--tz-line); }

.tz-buzz-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--tz-line);
}

/* Do NOT set color:#fff on the row — that bleached .tz-buzz-row strong
   (inherited white) before soft fill existed, and can still fight clip
   fallbacks. Brighten chrome only. */
.tz-buzz-row:hover .tz-buzz-num { color: #fff; }
.tz-buzz-row:hover .tz-buzz-main > div > span { color: #e2e8f0; }

.tz-buzz-num {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tz-faint);
}

.tz-buzz-row strong {
  display: block;
  font-family: var(--tz-font-display);
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 2px;
}

/* Category + hub buzz list titles — same soft theme tokens as article h2s.
   Hub rows use data-lane; category pages use body[data-tz-cat] tokens. */
body.trendz-page:not(:has(.tz-face-bg)):not(:has([data-people-intro])) .tz-buzz-row strong {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--tz-h2-a), var(--tz-h2-b) 45%, var(--tz-h2-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--tz-h2-a); /* solid fallback if clip unsupported */
  -webkit-text-fill-color: transparent;
}

.tz-buzz-row span {
  font-size: 0.8rem;
  color: var(--tz-muted);
}

.tz-video-group { margin: 28px 0 4px; }
.tz-video-group:first-of-type { margin-top: 0; }
.tz-video-group h2 {
  margin: 0 0 4px;
  font-family: var(--tz-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tz-video-group[data-lane="social"] h2 { color: #fdba74; }
.tz-video-group[data-lane="business"] h2 { color: #e8d48b; }
.tz-video-group[data-lane="sports"] h2 { color: #6ee7b7; }
.tz-video-group[data-lane="lifestyle"] h2 { color: #f9a8d4; }
.tz-video-group[data-lane="tech"] h2 { color: #67e8f9; }
.tz-video-group[data-lane="entertainment"] h2 { color: #c4b5fd; }
.tz-video-group[data-lane="politics"] h2 { color: #93c5fd; }

.tz-face-vid-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff0000;
  border: 2px solid #030308;
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.tz-face-vid-badge svg { width: 11px; height: 11px; fill: #fff; margin-left: 1px; }

.tz-buzz-video {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 50%;
  background: #ff0000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 2px 8px rgba(255,0,0,0.45);
  align-self: center;
  overflow: hidden;
}
.tz-buzz-video svg {
  width: 15px;
  height: 15px;
  max-width: 15px;
  max-height: 15px;
  fill: #fff;
  margin-left: 2px; /* optically center the play triangle */
}

.tz-also {
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--tz-muted);
}

/* Soft per-destination accents (not neon, not plain white).
   Attribute selectors cover 2-link and 3-link "Also:" variants. */
.tz-also a {
  text-decoration: none;
  transition: color .15s ease, border-bottom-color .15s ease, filter .15s ease;
}
.tz-also a[href*="ai-hub"] {
  color: #67e8f9;
  border-bottom: 1px solid rgba(103, 232, 249, 0.35);
}
.tz-also a[href*="community"] {
  color: #c4b5fd;
  border-bottom: 1px solid rgba(196, 181, 253, 0.35);
}
.tz-also a[href*="/trendz"] {
  color: #7dd3fc;
  border-bottom: 1px solid rgba(125, 211, 252, 0.35);
}
.tz-also a[href*="ai-hub"]:hover {
  color: #a5f3fc;
  border-bottom-color: rgba(165, 243, 252, 0.55);
  filter: brightness(1.08);
}
.tz-also a[href*="community"]:hover {
  color: #ddd6fe;
  border-bottom-color: rgba(221, 214, 254, 0.55);
  filter: brightness(1.08);
}
.tz-also a[href*="/trendz"]:hover {
  color: #bae6fd;
  border-bottom-color: rgba(186, 230, 253, 0.55);
  filter: brightness(1.08);
}

/* Category pages — compact, not giant */
.tz-cat-hero {
  padding: clamp(28px, 5vh, 44px) clamp(20px, 5vw, 48px) 12px;
  max-width: 880px;
  margin: 0 auto;
}

.tz-cat-hero-card { padding: 0; background: none; border: none; }

.tz-wordmark-sm {
  font-size: 1.1rem;
  line-height: 1;
  margin: 0 0 12px;
  display: inline-flex;
  align-items: baseline;
}

.tz-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--tz-muted);
}

.tz-crumb a {
  color: var(--tz-muted);
  text-decoration: none;
}

.tz-crumb a:hover { color: var(--tz-paper); }

.tz-cat-hero h1 {
  margin: 0;
  font-family: var(--tz-font-display);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--tz-paper);
}

.tz-cat-hero .tz-lede {
  text-align: left;
  margin-top: 8px;
  text-shadow: none;
  color: var(--tz-muted);
  font-size: 0.95rem;
}

.tz-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 8px clamp(20px, 5vw, 48px) clamp(64px, 10vh, 96px);
}

.tz-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.tz-rail a {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tz-muted);
  border: 1px solid var(--tz-line);
}

.tz-rail a:hover,
.tz-rail a[aria-current="page"] {
  color: var(--tz-paper);
  border-color: rgba(255, 255, 255, 0.28);
}

.trendz-page .site-footer {
  border-top: 1px solid var(--tz-line);
  background: rgba(12, 10, 16, 0.95);
}

.trendz-page .site-footer a,
.trendz-page .f-logo,
.trendz-page .f-copy,
.trendz-page .f-nav a {
  color: var(--tz-muted) !important;
}

.trendz-page .f-nav a:hover { color: var(--tz-paper) !important; }

@media (max-width: 720px) {
  .tz-dir-grid { grid-template-columns: 1fr; }
  .tz-dir-item {
    border-right: none !important;
    border-bottom: 1px solid var(--tz-line);
  }
  .tz-dir-item:last-child { border-bottom: none; }
  .tz-dir-item:last-child:nth-child(odd) { grid-column: auto; }
  /* TZ-44 — shorter wordmark + compact opaque card; collage visible around it */
  .tz-brand {
    font-size: clamp(1.3rem, 6vw, 1.65rem);
    line-height: 0.88;
    letter-spacing: -0.04em;
  }
  .tz-hero-inner {
    align-self: center;
    width: min(100% - 64px, 260px);
    max-width: 260px;
    margin: 0 auto;
    padding: 7px 10px 9px;
    background: rgba(12, 10, 16, 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
    border-radius: 12px;
  }
  .tz-lede {
    margin-top: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.28;
    max-width: 15.5rem;
  }
  .tz-hero-cta {
    margin-top: 0.4rem;
    gap: 6px;
  }
  .tz-btn {
    padding: 5px 11px;
    font-size: 0.7rem;
  }
  .tz-hero-wm {
    right: 10px;
    bottom: 8px;
    padding: 4px 9px;
    font-size: 0.64rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 10, 16, 0.82);
  }
  /* Denser grid: more columns = smaller tiles, less “zoomed” faces */
  .tz-collage {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    aspect-ratio: 8 / 3;
    width: 100%;
    max-height: none;
    gap: 1px;
  }
  .tz-collage img {
    object-position: center 18%;
  }
  .tz-collage img:nth-child(n+25) { display: none; }

  /* Faces of Trendz — narrow 2-line label; avatars get the width */
  .tz-faces {
    margin-top: -18px;
    padding: 0 12px;
  }
  .tz-faces-inner {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    overflow-x: hidden;
    overflow-y: visible;
  }
  .tz-faces-label {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: 4.6rem;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    white-space: normal;
  }
  .tz-faces-label-l1,
  .tz-faces-label-l2 {
    display: block;
  }
  .tz-faces-row {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .tz-faces-row::-webkit-scrollbar { display: none; }
  .tz-face {
    width: 32px;
    height: 32px;
    border-width: 1.5px;
    object-position: center 22%;
  }
  a.tz-face-link:hover .tz-face,
  a.tz-face-link:focus-visible .tz-face {
    transform: scale(1.04);
  }
  @keyframes tzFacePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 61, 154, 0.2); transform: scale(1); }
    50% { box-shadow: 0 0 0 3px rgba(78, 203, 255, 0.16); transform: scale(1.02); }
  }
}

@media (max-width: 480px) {
  /* Same density as tablet portrait — never fewer columns than 720px rule */
  .tz-collage {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    aspect-ratio: 8 / 3;
    width: 100%;
    max-height: none;
    gap: 1px;
  }
  .tz-collage img:nth-child(n+25) { display: none; }
  .tz-brand {
    font-size: clamp(1.2rem, 5.6vw, 1.5rem);
  }
  .tz-hero-inner {
    width: min(100% - 72px, 236px);
    max-width: 236px;
    padding: 6px 9px 8px;
  }
  .tz-lede { font-size: 0.66rem; }
  .tz-faces-label {
    max-width: 4.2rem;
    font-size: 0.54rem;
    letter-spacing: 0.06em;
  }
  .tz-face {
    width: 30px;
    height: 30px;
  }
  .tz-faces-row { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-hero-inner,
  .tz-face { animation: none !important; }
  .tz-hero-inner { opacity: 1; }
  .tz-icons-rotate-img { transition: none !important; }
  .tz-video-rotate-img { transition: none !important; }
}

/* Icons published-face rotator (Faces strip + directory card) */
.tz-icons-rotate-img {
  transition: opacity 0.28s ease;
}
.tz-icons-rotate-img.is-fading {
  opacity: 0.35;
}

/* Videos hero rotator (Faces strip) */
.tz-video-rotate-img {
  transition: opacity 0.28s ease;
}
.tz-video-rotate-img.is-fading {
  opacity: 0.35;
}

/* ── TZ-13 feature UI ── */
.tz-tools {
  max-width: 1040px;
  margin: 18px auto 0;
  padding: 0 clamp(20px, 5vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.tz-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--tz-line);
  background: rgba(255,255,255,0.04);
  color: var(--tz-paper);
  font: inherit;
  font-size: 0.9rem;
}
.tz-search::placeholder { color: var(--tz-faint); }
.tz-search:focus { outline: none; border-color: rgba(255,255,255,0.35); }
.tz-tool-btn {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--tz-line);
  background: rgba(255,255,255,0.04);
  color: var(--tz-paper);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.tz-tool-btn:hover { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); }
.tz-tool-btn.is-on { border-color: rgba(255,61,154,0.55); background: rgba(255,61,154,0.12); }

.tz-heat {
  max-width: 1040px;
  margin: 14px auto 0;
  padding: 0 clamp(20px, 5vw, 48px);
}
.tz-heat-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch;
}
.tz-heat-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--tz-line);
  background: rgba(255,255,255,0.03);
  color: var(--tz-muted);
  text-decoration: none;
  font-size: 0.8rem;
  white-space: nowrap;
}
.tz-heat-chip:hover { color: var(--tz-paper); border-color: rgba(255,255,255,0.28); }
.tz-heat-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff4db8;
  box-shadow: 0 0 10px rgba(255,77,184,0.6);
  animation: tzPulseDot 1.6s ease-in-out infinite;
}
@keyframes tzPulseDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.25); }
}

.tz-faces-row {
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tz-faces-row::-webkit-scrollbar { display: none; height: 0; }
a.tz-face-link {
  flex: 0 0 auto;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
a.tz-face-link .tz-face { display: block; cursor: pointer; }
a.tz-face-link:hover .tz-face,
a.tz-face-link:focus-visible .tz-face {
  border-color: rgba(255,255,255,0.55);
  transform: scale(1.06);
}
.tz-face-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(12,10,16,0.95);
  border: 1px solid var(--tz-line);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tz-paper);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
a.tz-face-link:hover .tz-face-tip,
a.tz-face-link:focus-visible .tz-face-tip { opacity: 1; }

.tz-dir-item.is-hidden { display: none; }
.tz-dir-item.is-followed { box-shadow: inset 3px 0 0 #ff4db8; }
.tz-follow {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--tz-line);
  background: transparent;
  color: var(--tz-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.tz-follow:hover { color: var(--tz-paper); }
.tz-follow.is-on {
  color: #ffd0ea;
  border-color: rgba(255,77,184,0.5);
  background: rgba(255,77,184,0.12);
}

.tz-quiz {
  max-width: 1040px;
  margin: 8px auto 0;
  padding: 0 clamp(20px, 5vw, 48px) 8px;
}
.tz-quiz-card {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--tz-line);
  background: rgba(255,255,255,0.03);
}
.tz-quiz-card h2 {
  margin: 0 0 6px;
  font-family: var(--tz-font-display);
  font-size: 1.1rem;
  font-weight: 700;
}
.tz-quiz-card p { margin: 0 0 12px; color: var(--tz-muted); font-size: 0.88rem; }
.tz-quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tz-quiz-opts button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--tz-line);
  background: rgba(255,255,255,0.04);
  color: var(--tz-paper);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.tz-quiz-opts button:hover { border-color: rgba(255,255,255,0.35); }
.tz-quiz-result {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--tz-muted);
}
.tz-quiz-result a { color: var(--tz-paper); font-weight: 600; }

.tz-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(20,16,28,0.95);
  border: 1px solid var(--tz-line);
  color: var(--tz-paper);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 400;
}
.tz-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── TZ-14 hashtags + collage hero ── */
/* TZ-15: hero crop set above */

.tz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

a.tz-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #d7c6ff;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

a.tz-tag:hover,
a.tz-tag:focus-visible {
  border-color: rgba(255,77,184,0.55);
  background: rgba(255,77,184,0.12);
  color: #ffe3f3;
}

a.tz-tag.is-active {
  border-color: rgba(255,77,184,0.7);
  background: rgba(255,77,184,0.18);
  color: #fff;
}

.tz-tag-rail {
  max-width: 1040px;
  margin: 12px auto 0;
  padding: 0 clamp(20px, 5vw, 48px);
  display: flex;
  gap: 10px;
  align-items: center;
}

.tz-tag-rail-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tz-faint);
}

.tz-tag-rail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0;
}

.tz-tag-banner {
  max-width: 1040px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,77,184,0.35);
  background: rgba(255,77,184,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--tz-muted);
  font-size: 0.88rem;
}

.tz-tag-banner[hidden] { display: none !important; }
.tz-tag-banner strong { color: var(--tz-paper); }

.tz-buzz-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--tz-line);
}

.tz-buzz-row:last-child { border-bottom: none; }
.tz-buzz-row.is-hidden { display: none; }

a.tz-buzz-main {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

/* Non-people Trendz post titles: match community .post h1 em
   (e.g. /community/blogs-should-talk-back/) — multi-stop cyan→pink flash
   + soft glow. More specific than shared.css `h1 em`, scoped to exclude
   People/Icons (tz-face-bg / data-people-intro) which keep their own
   rainfall treatment via page-local CSS. */
body.trendz-page:not(:has(.tz-face-bg)):not(:has([data-people-intro])) .article h1 em {
  font-style: normal;
  font-weight: 700;
  display: inline;
  color: #00e8db; /* fallback if clip unsupported */
  background-image: linear-gradient(135deg, #00e8db 0%, #38bdf8 32%, #8b5cf6 68%, #ec4899 100%);
  background-color: transparent;
  background-size: 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(0, 232, 219, 0.28)) drop-shadow(0 0 28px rgba(139, 92, 246, 0.22));
}

/* People/Icons fallback if a page lacks local rainfall CSS — keep accent
   pair, never inherit the community glow above. */
body.trendz-page:has(.tz-face-bg) .article h1 em,
body.trendz-page:has([data-people-intro]) .article h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--tz-accent);
  background-image: linear-gradient(135deg, var(--tz-accent), var(--tz-accent2));
  background-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
}

/* Non-people Trendz in-article section h2s: soft theme-aware colors
   (per category; muted, not neon). Same exclusion as h1 flash —
   People/Icons (tz-face-bg / data-people-intro) keep white/rainfall.
   Poll/quiz/publisher/xlinks h2s sit outside .article-body and stay
   page-local white. Tokens drawn from Trendz rainbow + shared palette. */
body.trendz-page {
  /* Default / tech-adjacent fallback — soft cyan→sky→slate */
  --tz-h2-a: #67e8f9;
  --tz-h2-b: #7dd3fc;
  --tz-h2-c: #94a3b8;
}
/* Business — soft amber/gold (consult-preview / IMAGE amber family) */
body.trendz-page[data-article-slug^="tz-business-"],
body.trendz-page[data-tz-cat="business"],
.tz-buzz-row[data-lane="business"],
.tz-dir-item[data-lane="business"] {
  --tz-h2-a: #e8d48b;
  --tz-h2-b: #d4af37;
  --tz-h2-c: #94a3b8;
}
/* Tech — soft cyan/sky (approved sample) */
body.trendz-page[data-article-slug^="tz-tech-"],
body.trendz-page[data-tz-cat="tech"],
.tz-buzz-row[data-lane="tech"],
.tz-dir-item[data-lane="tech"] {
  --tz-h2-a: #67e8f9;
  --tz-h2-b: #7dd3fc;
  --tz-h2-c: #94a3b8;
}
/* Lifestyle — soft rose→lavender */
body.trendz-page[data-article-slug^="tz-lifestyle-"],
body.trendz-page[data-tz-cat="lifestyle"],
.tz-buzz-row[data-lane="lifestyle"],
.tz-dir-item[data-lane="lifestyle"] {
  --tz-h2-a: #f9a8d4;
  --tz-h2-b: #d8b4fe;
  --tz-h2-c: #94a3b8;
}
/* Entertainment — soft violet→fuchsia */
body.trendz-page[data-article-slug^="tz-entertainment-"],
body.trendz-page[data-tz-cat="entertainment"],
.tz-buzz-row[data-lane="entertainment"],
.tz-dir-item[data-lane="entertainment"] {
  --tz-h2-a: #c4b5fd;
  --tz-h2-b: #f0abfc;
  --tz-h2-c: #94a3b8;
}
/* Politics — soft sky→indigo */
body.trendz-page[data-article-slug^="tz-politics-"],
body.trendz-page[data-tz-cat="politics"],
.tz-buzz-row[data-lane="politics"],
.tz-dir-item[data-lane="politics"] {
  --tz-h2-a: #93c5fd;
  --tz-h2-b: #a5b4fc;
  --tz-h2-c: #94a3b8;
}
/* Social — soft orange→rose (community brand family) */
body.trendz-page[data-article-slug^="tz-social-"],
body.trendz-page[data-tz-cat="social"],
.tz-buzz-row[data-lane="social"],
.tz-dir-item[data-lane="social"] {
  --tz-h2-a: #fdba74;
  --tz-h2-b: #fda4af;
  --tz-h2-c: #94a3b8;
}
/* Sports — soft emerald→teal */
body.trendz-page[data-article-slug^="tz-sports-"],
body.trendz-page[data-tz-cat="sports"],
.tz-buzz-row[data-lane="sports"],
.tz-dir-item[data-lane="sports"] {
  --tz-h2-a: #6ee7b7;
  --tz-h2-b: #5eead4;
  --tz-h2-c: #94a3b8;
}
/* Soft section h2s — beat page-local `.article-body h2{color:var(--tz-text)}`
   via higher specificity + explicit fill. People/Icons excluded. */
body.trendz-page:not(:has(.tz-face-bg)):not(:has([data-people-intro])) .article-body h2 {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--tz-h2-a), var(--tz-h2-b) 45%, var(--tz-h2-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--tz-h2-a); /* solid fallback if clip unsupported */
  -webkit-text-fill-color: transparent;
}

/* .tz-person (Icons lane cards) never got link styling added here, so its
   <a> tags fell back to default browser blue/underline -- same reset
   pattern as .tz-buzz-main above, kept consistent with the rest of Trendz. */
.tz-person h3 a {
  /* Rainbow gradient (not just underline) so a live article reads as
     something worth clicking, not identical to the plain white
     placeholder headings ("Sports icons" etc) next to it. --tz-accent is
     unset on listing pages like /trendz/icons/ (only article pages define
     it locally), so this uses --tz-l1...l6 -- always defined at :root,
     same rainbow as the nav/hero "Trendz." wordmark. */
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--tz-l5);
  text-underline-offset: 3px;
  color: var(--tz-l5);
  background-image: linear-gradient(
    90deg,
    var(--tz-l1) 0%,
    var(--tz-l2) 20%,
    var(--tz-l3) 40%,
    var(--tz-l4) 60%,
    var(--tz-l5) 80%,
    var(--tz-l6) 100%
  );
  background-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter .2s;
}
.tz-person h3 a:hover {
  filter: brightness(1.25);
}
.tz-person-meta a {
  text-decoration: none;
  color: inherit;
}
.tz-person-meta a:hover {
  color: var(--tz-l5);
}

/* Keep exploring + sources — bright sky links, never browser navy.
   Prefer --link (#67e8f9) over category --tz-accent so titles stay
   readable even when accent is a deeper teal. */
body.trendz-page .xlinks a:any-link,
body.trendz-page .sources a:any-link {
  color: var(--link, #67e8f9);
  -webkit-text-fill-color: currentColor;
  text-decoration: none;
}
body.trendz-page .xlinks a:hover,
body.trendz-page .sources a:hover {
  color: var(--link-hover, #a5f3fc);
  -webkit-text-fill-color: currentColor;
  text-decoration: underline;
}

.tz-buzz-row .tz-tags { margin-top: 2px; padding-left: 54px; }

.tz-cat-hero-card .tz-tags { margin-top: 12px; }

@media (max-width: 720px) {
  .tz-tag-rail { flex-direction: column; align-items: flex-start; }
  .tz-buzz-row .tz-tags { padding-left: 0; }
}

/* Trendz "Engage · poll" — shared styles for button (.c-engage) and
   radio (.poll-choices) markup. Behavior lives in trendz/poll.js
   (localStorage indicative tallies; not a live global census).
   --tz-accent/--tz-accent2 are set on article pages. */
.c-engage-choices,
.poll-choices { display: flex; flex-wrap: wrap; gap: .5rem; margin: .85rem 0; }
.c-engage-choice,
.poll-choices label {
  background: var(--tz-surface);
  border: 1px solid var(--tz-border);
  color: var(--tz-body);
  border-radius: 999px;
  padding: .45rem .85rem;
  cursor: pointer;
  font-size: .85rem;
  font-family: inherit;
  transition: .15s;
}
.c-engage-choice:hover,
.poll-choices label:hover { border-color: var(--tz-accent); }
.c-engage-choice.is-on,
.poll-choices label.is-on,
.poll-choices input:checked + span {
  background: rgba(34,211,238,.12);
  border-color: var(--tz-accent);
  color: var(--tz-text);
}
.poll-choices label.is-on {
  background: rgba(34,211,238,.12);
  border-color: var(--tz-accent);
  color: var(--tz-text);
}
.poll-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.poll-choices label:focus-visible,
.c-engage-choice:focus-visible {
  outline: 2px solid var(--tz-accent);
  outline-offset: 2px;
}
.hub-engage-results,
.tz-poll-results {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tz-border);
}
.hub-engage-results[hidden],
.tz-poll-results[hidden] { display: none !important; }
.hub-engage-results-kicker {
  font-weight: 700;
  color: var(--tz-text);
  margin: 0 0 .75rem;
  font-size: .9rem;
}
.hub-engage-results-soft { color: var(--tz-muted); font-weight: 400; }
.hub-engage-results-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hub-engage-results-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; margin-bottom: .3rem; }
.hub-engage-results-label { color: var(--tz-body); }
.hub-engage-results-row.is-yours .hub-engage-results-label { color: var(--tz-text); font-weight: 600; }
.hub-engage-results-row.is-yours .hub-engage-results-label em { color: var(--tz-accent); font-style: normal; }
.hub-engage-results-pct { color: var(--tz-muted); font-variant-numeric: tabular-nums; }
.hub-engage-results-track { height: 6px; border-radius: 999px; background: var(--tz-border); overflow: hidden; }
.hub-engage-results-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tz-accent), var(--tz-accent2));
  transition: width .35s ease;
}
.hub-engage-results-foot { font-size: .78rem; color: var(--tz-muted); margin: .85rem 0 0; }
.hub-engage-results-foot strong { color: var(--tz-text); font-weight: 600; }

/* Article quiz — shared baseline so options never collapse inline when a
   page-local stylesheet omits .quiz-q label { display:block }. */
.quiz-section h2 {
  font-size: 1.05rem;
  margin: 0 0 .75rem;
  color: var(--tz-text, #f1f5f9);
}
.quiz-q {
  margin: 1.25rem 0;
}
.quiz-q p {
  font-weight: 600;
  color: var(--tz-text, #f1f5f9);
  margin: 0 0 .5rem;
  font-size: .95rem;
}
.quiz-q label {
  display: block;
  color: var(--tz-body, #cbd5e1);
  font-size: .9rem;
  margin: .3rem 0;
  padding: .3rem .5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s;
  line-height: 1.45;
}
.quiz-q label:hover {
  background: rgba(34, 211, 238, .08);
}
.quiz-q input[type="radio"] {
  margin-right: .5rem;
  vertical-align: middle;
}
.quiz-feedback {
  margin: .5rem 0;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .85rem;
  display: none;
}
.quiz-check-btn {
  background: var(--tz-accent, #22d3ee);
  color: #0a0e1a;
  border: none;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: .15s;
  margin-top: .5rem;
}
.quiz-check-btn:hover { opacity: .85; }

/* Further reading / keep exploring — readable accent links on dark surfaces */
.sources h3 {
  font-size: .95rem;
  color: var(--tz-text, #f1f5f9);
  margin: 0 0 .35rem;
}
.sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
}
.sources li {
  margin: .45rem 0;
  color: var(--tz-muted, #94a3b8);
}
.sources a:any-link,
.xlinks a:any-link {
  color: var(--link, #67e8f9);
  -webkit-text-fill-color: currentColor;
  text-decoration: none;
}
.sources a:hover,
.xlinks a:hover {
  color: var(--link-hover, #a5f3fc);
  -webkit-text-fill-color: currentColor;
  text-decoration: underline;
}

/* People/Icons personality face wash — shared baseline (TZ-48).
   Keep the dimmed face visible in gutters / card edges (AJ likes it),
   but never let bright stage lights bleed through body copy.
   Prefer a stronger .article scrim + modest blur over nuking the wash.
   Splash (people-intro) stays z-index 10000; washes stay at 0. */
html:has(.tz-face-bg),
body.trendz-page:has(.tz-face-bg) {
  background: #070a12 !important;
}
body.trendz-page:has(.tz-face-bg)::before {
  display: none !important; /* kill shared.css teal/violet aurora margins */
}
.tz-face-bg {
  z-index: 0;
  background: #070a12;
}

/* Readable text + opaque-enough nested surfaces over any wash.
   Keep h1 fill alone — People rainfall / h1 em flash live on .article h1. */
body.trendz-page:has(.tz-face-bg) .article h1 {
  color: #f1f5f9;
}
body.trendz-page:has(.tz-face-bg) .article-body h2,
body.trendz-page:has(.tz-face-bg) .article-body h3,
body.trendz-page:has(.tz-face-bg) .article-body strong,
body.trendz-page:has([data-people-intro]) .article-body h2 {
  color: #f1f5f9;
  -webkit-text-fill-color: #f1f5f9;
  background-image: none;
}
body.trendz-page:has(.tz-face-bg) .article-body,
body.trendz-page:has(.tz-face-bg) .article-body p {
  color: #cbd5e1;
}
body.trendz-page:has(.tz-face-bg) .article-body th {
  background: rgba(18, 24, 42, 0.94);
  color: #f1f5f9;
}
body.trendz-page:has(.tz-face-bg) .article-body td {
  background: rgba(12, 16, 28, 0.88);
}
body.trendz-page:has(.tz-face-bg) .poll-section {
  background: rgba(18, 24, 42, 0.9);
}
body.trendz-page:has(.tz-face-bg) .quiz-section,
body.trendz-page:has(.tz-face-bg) .sources {
  background: rgba(18, 24, 42, 0.94);
}
body.trendz-page:has(.tz-face-bg) .publisher-block {
  background: linear-gradient(
    135deg,
    rgba(18, 24, 42, 0.92),
    rgba(18, 24, 42, 0.88)
  );
}
body.trendz-page:has(.tz-face-bg) .stat-card {
  background: rgba(18, 24, 42, 0.92);
}

/* Desktop: solid enough panel; face still peeks in side gutters */
@media (min-width: 901px) {
  body.trendz-page:has(.tz-face-bg) .article {
    background: rgba(10, 14, 26, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

@media (max-width: 900px) {
  body.trendz-page .tz-face-bg img {
    right: 50%;
    left: auto;
    transform: translateX(50%);
    width: min(125vw, 760px);
    max-height: 100vh;
    top: -2%;
    /* still visible in margins; slightly softer under the card */
    opacity: 0.55;
    filter: saturate(1.08) contrast(1.1) brightness(1.04);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%),
      linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%),
      linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  body.trendz-page .tz-face-bg img.tz-face-left {
    display: block;
    right: auto;
    left: 50%;
    transform: translateX(-55%);
    width: min(105vw, 600px);
    top: 2%;
    opacity: 0.22;
    filter: saturate(1.05) contrast(1.06) brightness(1.0);
  }
  /* Stronger veil in the vertical band where the article sits;
     gutters stay lighter so the face still peeks at card edges */
  body.trendz-page .tz-face-bg::after {
    background:
      linear-gradient(
        90deg,
        rgba(7, 10, 18, 0.12) 0%,
        rgba(7, 10, 18, 0.55) 18%,
        rgba(7, 10, 18, 0.72) 50%,
        rgba(7, 10, 18, 0.55) 82%,
        rgba(7, 10, 18, 0.12) 100%
      ),
      linear-gradient(
        180deg,
        rgba(7, 10, 18, 0.2) 0%,
        rgba(7, 10, 18, 0.45) 28%,
        rgba(7, 10, 18, 0.7) 100%
      );
  }
  /* KEY: readable scrim — face peeks in side margins / rounded edges */
  body.trendz-page:has(.tz-face-bg) .article {
    background: rgba(10, 14, 26, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 1.75rem 1rem 1.5rem;
  }
}
@media (max-width: 640px) {
  body.trendz-page:has(.tz-face-bg) .article {
    background: rgba(10, 14, 26, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: 1.5rem 0.85rem 1.5rem;
    padding: 1rem 1rem 3rem;
    border-radius: 14px;
  }
  body.trendz-page .tz-face-bg img {
    opacity: 0.52;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.trendz-page .tz-face-bg img { opacity: 0.38; }
  body.trendz-page .tz-face-bg img.tz-face-left { opacity: 0.14; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.trendz-page .tz-face-bg img { opacity: 0.36; }
  body.trendz-page .tz-face-bg img.tz-face-left { opacity: 0.12; }
}

/* ── People/Icons intro splash (people-intro.js) ──
   Opt-in: body[data-people-intro]. Session once: tz-people-intro:<slug>.
   Full-bleed poster: img is fixed cover; use data-people-intro-position
   (object-position) so the face sits upper/mid — tall portraits with
   headroom often need ~center 35–40%, tight head crops ~center 12–18%.
   z-index above article/share/comments; unlock via .tz-people-intro-done. */
body.tz-people-intro-active {
  overflow: hidden !important;
}
.tz-people-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: #070a12;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.72s ease, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.tz-people-intro.is-on { opacity: 1; }
.tz-people-intro.is-out {
  opacity: 0;
  transform: translateY(-2.5vh);
  pointer-events: none;
}
.tz-people-intro.is-reduced,
.tz-people-intro.is-reduced.is-out {
  transition: none;
}
.tz-people-intro__img {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  /* Poster default: upper-mid focal (overridden by inline from data-people-intro-position) */
  object-position: center 28%;
  display: block;
  filter: saturate(1.04) contrast(1.06);
  pointer-events: none;
}
/* Landscape viewports crop tall portraits hardest — bias default toward mid-subject */
@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  .tz-people-intro__img {
    object-position: center 36%;
  }
}
.tz-people-intro__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 10, 18, 0.28) 0%, rgba(7, 10, 18, 0.12) 38%, rgba(7, 10, 18, 0.55) 68%, rgba(7, 10, 18, 0.92) 100%),
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(255, 255, 255, 0.04), transparent 55%);
}
.tz-people-intro__copy {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  padding: 0 1.25rem 2.4rem;
  text-align: center;
  pointer-events: none;
}
.tz-people-intro__name {
  margin: 0 0 0.55rem;
  font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
  font-size: clamp(1.15rem, 3.6vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.92);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
.tz-people-intro__hint {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .tz-people-intro,
  .tz-people-intro.is-out {
    transition: none;
  }
}