/* GENERATED by scripts/build-css-bundles.mjs -- do not edit.
   Edit the sources below and re-run the script.
     trendz/trendz.css
     signal/community/comments.css
     trendz/comments.css
     assets/share.css
*/

/* ---- trendz/trendz.css ---- */
/* 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-cards {
  grid-area: 1 / 1;
  position: relative;
  z-index: 4;
  align-self: end;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto clamp(16px, 2.5vh, 28px);
  width: min(100% - 32px, 760px);
}
.tz-hero-cards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
}
.tz-hero-inner {
  position: relative;
  width: min(100% - 32px, 360px);
  max-width: 360px;
  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;
}
.tz-hero-inner--mz {
  max-width: 280px;
  animation-delay: 0.15s;
  border-color: color-mix(in srgb, var(--mz-l2) 35%, rgba(255, 255, 255, 0.12));
}
.tz-hero-inner--mz .tz-lede { font-size: 0.76rem; }
.tz-hero-inner--mz .tz-btn-primary {
  background: linear-gradient(90deg, var(--mz-l1), var(--mz-l2), var(--mz-l3));
  border-color: transparent;
  color: #0a0a12;
}
/* Motionz mini-wordmark — scoped to this one card, not the whole page
   (this lives on the Trendz directory page, not a Motionz page, so the
   body.motionz-page scoping used elsewhere doesn't apply here). */
.tz-hero-inner--mz .tz-letter:nth-child(1) { --tz-lc: var(--mz-l1); }
.tz-hero-inner--mz .tz-letter:nth-child(2) { --tz-lc: var(--mz-l2); }
.tz-hero-inner--mz .tz-letter:nth-child(3) { --tz-lc: var(--mz-l3); }
.tz-hero-inner--mz .tz-letter:nth-child(4) { --tz-lc: var(--mz-l4); }
.tz-hero-inner--mz .tz-letter:nth-child(5) { --tz-lc: var(--mz-l5); }
.tz-hero-inner--mz .tz-letter:nth-child(6) { --tz-lc: var(--mz-l6); }
.tz-hero-inner--mz .tz-letter:nth-child(7) { --tz-lc: var(--mz-l1); }
.tz-hero-inner--mz .tz-letter:nth-child(8) { --tz-lc: var(--mz-l2); }

.tz-hero-inner--vz {
  max-width: 280px;
  animation-delay: 0.3s;
  border-color: color-mix(in srgb, var(--vz-l2) 35%, rgba(255, 255, 255, 0.12));
}
.tz-hero-inner--vz .tz-lede { font-size: 0.76rem; }
.tz-hero-inner--vz .tz-btn-primary {
  background: linear-gradient(90deg, var(--vz-l1), var(--vz-l2), var(--vz-l3));
  border-color: transparent;
  color: #0a0a12;
}
/* Vibez mini-wordmark — scoped to this one card, same pattern as the
   Motionz card above (this lives on the Trendz directory page, not a
   Vibez page, so the body.vibez-page scoping doesn't apply here). */
.tz-hero-inner--vz .tz-letter:nth-child(1) { --tz-lc: var(--vz-l1); }
.tz-hero-inner--vz .tz-letter:nth-child(2) { --tz-lc: var(--vz-l2); }
.tz-hero-inner--vz .tz-letter:nth-child(3) { --tz-lc: var(--vz-l3); }
.tz-hero-inner--vz .tz-letter:nth-child(4) { --tz-lc: var(--vz-l4); }
.tz-hero-inner--vz .tz-letter:nth-child(5) { --tz-lc: var(--vz-l5); }
.tz-hero-inner--vz .tz-letter:nth-child(6) { --tz-lc: var(--vz-l6); }
.tz-hero-inner--vz .tz-letter:nth-child(7) { --tz-lc: var(--vz-l1); }
.tz-hero-inner--vz .tz-letter:nth-child(8) { --tz-lc: var(--vz-l2); }

@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); }
/* Wordmarks longer than 6 letters (e.g. "Motionz.") cycle back through the
   same 6-color ramp rather than leaving later letters undefined. */
.tz-letter:nth-child(7) { --tz-lc: var(--tz-l1); }
.tz-letter:nth-child(8) { --tz-lc: var(--tz-l2); }

/* Motionz wordmark — VHS scanlines over a full 6-stop rainbow, its own
   identity rather than a Trendz palette swap. Scoped to just this page's
   hero wordmark so it can't leak into the sitewide Trendz nav link, which
   reads the same --tz-l1..l6 vars the base .tz-letter rules use.
   Mechanism differs from the base per-letter fill above: instead of each
   .tz-letter painting its own solid color, the letters are reset to no
   fill and the continuous gradient+scanlines paint through from the
   parent .tz-brand, so the rainbow flows smoothly across the whole word
   instead of blocking out letter-by-letter. */
body.motionz-page .tz-brand[data-tz-wordmark] {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.55) 0px, rgba(255, 255, 255, 0.55) 2px, rgba(0, 0, 0, 0.35) 2px, rgba(0, 0, 0, 0.35) 5px),
    linear-gradient(90deg, var(--mz-l1) 0%, var(--mz-l2) 20%, var(--mz-l3) 40%, var(--mz-l4) 60%, var(--mz-l5) 80%, var(--mz-l6) 100%);
  background-size: 100% 100%, 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: mz-vhs-shift 6s ease-in-out infinite;
}
/* .tz-letter is display:inline-block for the base per-letter treatment,
   which fragments an ancestor's background-clip:text into separate
   islands per letter instead of one continuous flow — forcing it back to
   inline here lets the parent's gradient+scanlines paint smoothly across
   the whole word instead of looking like discrete per-letter blocks. */
body.motionz-page .tz-brand[data-tz-wordmark] .tz-letter,
body.motionz-page .tz-brand[data-tz-wordmark] .tz-period {
  display: inline;
  background-image: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@keyframes mz-vhs-shift {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body.motionz-page .tz-brand[data-tz-wordmark] { animation: none; }
}

/* Vibez wordmark — repoints the shared --tz-l1…l6 letter-cycle vars (used
   by the base .tz-letter rules above) at the Vibez VU-meter palette, so
   "Vibez." reads in its own colors without a separate animation system. */
body.vibez-page {
  --tz-l1: var(--vz-l1);
  --tz-l2: var(--vz-l2);
  --tz-l3: var(--vz-l3);
  --tz-l4: var(--vz-l4);
  --tz-l5: var(--vz-l5);
  --tz-l6: var(--vz-l6);
}

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

.mz-subcat {
  margin: -0.3rem 0 0.9rem;
  font-family: var(--tz-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mz-l2);
  opacity: 0.85;
}

/* Motionz thumbnail grid — replaces the full-width tz-buzz-row list with
   compact cards so the page uses space efficiently. */
.mz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.mz-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.mz-card:hover, .mz-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--mz-l2);
}
.mz-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--mz-l1), var(--mz-l2), var(--mz-l3));
  overflow: hidden;
}
.mz-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mz-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  color: #fff;
}
.mz-play svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
}
.mz-card-body {
  padding: 5px 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mz-card-body strong {
  font-family: var(--tz-font-body);
  font-size: 0.62rem;
  line-height: 1.2;
  color: rgba(243, 240, 247, 0.95);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mz-card-body span {
  display: none;
}
.vz-release-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.vz-release-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s ease;
}
.vz-release-row:hover {
  border-color: var(--mz-l2);
}
.vz-release-row .mz-thumb {
  flex: 0 0 160px;
  width: 160px;
  border-radius: 10px;
}
.vz-release-row .mz-card-body {
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.vz-release-row .mz-card-body strong {
  font-size: 0.85rem;
  -webkit-line-clamp: 2;
}
.vz-story-link {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--tz-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mz-l2);
  text-decoration: none;
  border: 1px solid var(--mz-l2);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}
.vz-story-link:hover, .vz-story-link:focus-visible {
  background: var(--mz-l2);
  color: #0a0e1a;
}
@media (max-width: 520px) {
  .vz-release-row { flex-wrap: wrap; }
  .vz-release-row .mz-thumb { flex-basis: 120px; width: 120px; }
  .vz-story-link { margin-left: 0; flex-basis: 100%; text-align: center; }
}

.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);
}

/* Motionz — the hero H1 itself carries the wordmark treatment (VHS
   scanlines + rainbow, see body.motionz-page .tz-brand rules above)
   instead of a separate small badge above a plain H1. Needs higher
   specificity than the plain .tz-cat-hero h1 rule above (0,1,1) since
   .tz-brand alone (0,1,0) would lose to it otherwise. */
.tz-cat-hero-card h1.tz-brand.mz-hero-h1,
.tz-cat-hero-card h1.tz-brand.vz-hero-h1 {
  display: inline-flex;
  font-size: clamp(1.6rem, 4vw, 2rem);
  margin: 0 0 6px;
  justify-content: flex-start;
}

.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-cards {
    width: min(100% - 32px, 420px);
    gap: 8px;
  }
  .tz-hero-cards-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .tz-hero-inner {
    align-self: center;
    width: 100%;
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 7px 8px 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-hero-inner--mz { max-width: none; }
  .tz-hero-inner .tz-btn { padding: 6px 10px; font-size: 0.7rem; }
  .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-cards { width: min(100% - 40px, 360px); }
  .tz-hero-inner {
    width: 100%;
    max-width: none;
    padding: 6px 8px 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 h2 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 h2 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;
  }
}

/* Motionz tabs — reuses the .tz-rail pill-link visual system as a
   role="tablist"; active state matches .tz-rail's existing
   [aria-current="page"] look, no new visual language. */
.mz-tabs { margin-bottom: 8px; }
.mz-panel-title {
  margin: 0 0 18px;
  padding-top: 4px;
  border-top: 1px solid var(--tz-line);
  padding-top: 16px;
  font-family: var(--tz-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tz-paper);
}
#mz-panel-videos .mz-panel-title { border-top: none; padding-top: 0; }
#vz-panel-videos .mz-panel-title { border-top: none; padding-top: 0; }

/* Vibez launch empty-state — honest placeholder card for lanes with no
   posts yet, instead of fabricating broken links. */
.vz-empty {
  border: 1px solid var(--tz-line);
  border-radius: 14px;
  padding: 22px clamp(16px, 4vw, 28px);
  background: rgba(255, 255, 255, 0.02);
  color: var(--tz-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.vz-empty strong { color: var(--tz-paper); }

/* ---- signal/community/comments.css ---- */
/* Article comments — compact, flat, collapsible */

.comments-section {
  margin-top: var(--space-8);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.comments-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: none;
  color: var(--text2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}

.comments-toggle:hover {
  color: var(--accent);
}

.comments-toggle-arrow {
  font-size: 14px;
  color: var(--muted);
  transition: transform 0.2s, color 0.2s;
}

.comments-toggle:hover .comments-toggle-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.comments-panel {
  padding: 4px 0 0;
}

.comments-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.comments-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.comments-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.comments-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 8px 0 12px;
  font-size: var(--text-sm);
  color: var(--muted);
}

.google-btn--compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.google-btn--compact svg {
  width: 14px;
  height: 14px;
}

.google-btn--compact:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

.comments-compose {
  margin-bottom: 14px;
}

.comments-compose-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.comments-compose-row textarea,
.comment-reply-form textarea {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 80px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 8px 12px;
  outline: none;
  line-height: 1.45;
  transition: max-height 0.2s, border-color 0.2s;
}

.comments-compose-row textarea.comments-input--expanded,
.comment-reply-form textarea.comments-input--expanded {
  max-height: 160px;
}

.comments-compose-row textarea:focus,
.comment-reply-form textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.comments-submit {
  flex: 0 0 auto;
  align-self: flex-end;
  border: none;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0a0708;
  font-weight: 600;
  font-size: 12px;
  transition: opacity 0.2s;
}

.comments-submit:hover { opacity: 0.9; }
.comments-submit:disabled { opacity: 0.45; cursor: default; }

.comments-empty {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: 6px 0 10px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.comment {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  background: none;
}

.comment:last-child {
  border-bottom: none;
}

.comment.reply {
  margin-left: clamp(12px, 3vw, 28px);
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-bottom: none;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* Comments mount inside <article class="post">, so chat.css's blanket
   "article.post img { width:100% !important }" article-image rule would otherwise
   blow avatars up to full width. Re-assert avatar sizing with matching weight. */
.comment-meta img,
article.post .comment-meta img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
  display: block;
  margin: 0;
}

.comment-meta .avatar-fallback {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0a0708;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comment-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.comment-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
}

.comment-body {
  font-size: var(--text-sm);
  color: var(--text2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.comment-body.removed {
  font-style: italic;
  color: var(--muted);
}

.comment-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.comment-actions button {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.comment-actions button:hover { color: var(--accent); }

.comment-reply-form {
  margin-top: 8px;
}

.comments-error {
  font-size: var(--text-xs);
  color: #f38ba0;
  margin-top: 6px;
}

.comments-replies {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
}

.article-save-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}
.article-save-btn {
  appearance: none;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  background: rgba(255, 255, 255, 0.04);
  color: var(--text2, inherit);
  font: inherit;
  font-size: var(--text-sm, 0.85rem);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.article-save-btn:hover {
  border-color: var(--accent, #00e8db);
  color: var(--accent, #00e8db);
}
.article-save-btn.is-saved {
  border-color: var(--accent, #00e8db);
  background: color-mix(in srgb, var(--accent, #00e8db) 14%, transparent);
  color: var(--accent, #00e8db);
}
.article-save-btn:disabled { opacity: 0.6; cursor: wait; }
.article-save-hint {
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
}
.comment-author {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.comment-author a,
.comment-author-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.comment-author a:hover,
.comment-author-link:hover { text-decoration: underline; }
.comment-handle {
  font-size: 0.78em;
  font-weight: 500;
  color: var(--muted, #94a3b8);
  text-decoration: none;
}
.comment-handle:hover { color: var(--accent, #38bdf8); text-decoration: underline; }
.comment-mention {
  color: #38bdf8;
  text-decoration: none;
  font-weight: 600;
}
.comment-mention:hover { text-decoration: underline; }

.mention-dropdown {
  position: absolute;
  z-index: 80;
  max-height: 240px;
  overflow-y: auto;
  background: #12161c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 4px;
}

.mention-empty {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #94a3b8);
}

.mention-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text, #e8eef7);
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}

.mention-option:hover,
.mention-option.is-active {
  background: rgba(56, 189, 248, 0.12);
}

.mention-option-av {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
}

.mention-option-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mention-option-av .avatar-fallback {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
}

.mention-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mention-option-handle {
  font-size: 13px;
  font-weight: 600;
  color: #38bdf8;
}

.mention-option-name {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .comments-compose-row {
    flex-direction: column;
    align-items: stretch;
  }

  .comments-submit {
    align-self: flex-end;
  }

  .comment.reply { margin-left: 12px; }
}

/* ---- trendz/comments.css ---- */
/* Trendz discussion threads — remaps Community comments onto Trendz theme vars.
   Include after /community/comments.css on Trendz article detail pages. */

.trendz-page .comments-section {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tz-border, var(--border));
}

.trendz-page .comments-toggle {
  color: var(--tz-body, var(--text2));
}

.trendz-page .comments-toggle:hover,
.trendz-page .comments-toggle:hover .comments-toggle-arrow,
.trendz-page .comment-actions button:hover {
  color: var(--tz-accent, var(--accent));
}

.trendz-page .comments-toggle-arrow,
.trendz-page .comments-count,
.trendz-page .comments-gate,
.trendz-page .comments-empty,
.trendz-page .comment-time,
.trendz-page .comment-actions button,
.trendz-page .article-save-hint {
  color: var(--tz-muted, var(--muted));
}

.trendz-page .comments-head h2,
.trendz-page .comment-author {
  color: var(--tz-text, var(--text));
}

.trendz-page .comment-body {
  color: var(--tz-body, var(--text2));
}

.trendz-page .comment,
.trendz-page .google-btn--compact,
.trendz-page .article-save-btn {
  border-color: var(--tz-border, var(--border));
}

.trendz-page .comment.reply {
  border-left-color: color-mix(in srgb, var(--tz-accent, var(--accent)) 35%, var(--tz-border, var(--border)));
}

.trendz-page .comments-compose-row textarea,
.trendz-page .comment-reply-form textarea {
  background: var(--tz-surface, rgba(255, 255, 255, 0.03));
  border-color: var(--tz-border, var(--border));
  color: var(--tz-text, var(--text));
}

.trendz-page .comments-compose-row textarea:focus,
.trendz-page .comment-reply-form textarea:focus {
  border-color: color-mix(in srgb, var(--tz-accent, var(--accent)) 50%, var(--tz-border, var(--border)));
}

.trendz-page .comments-submit {
  background: linear-gradient(135deg, var(--tz-accent, var(--accent)), var(--tz-accent2, var(--accent2)));
  color: #0a0e1a;
}

.trendz-page .google-btn--compact {
  background: rgba(255, 255, 255, 0.04);
  color: var(--tz-body, var(--text2));
}

.trendz-page .google-btn--compact:hover {
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--tz-text, var(--text));
}

.trendz-page .comment-meta .avatar-fallback {
  background: linear-gradient(135deg, var(--tz-accent, var(--accent)), var(--tz-accent2, var(--accent2)));
  color: #0a0e1a;
}

.trendz-page .article-save-btn {
  background: rgba(255, 255, 255, 0.03);
  color: var(--tz-body, var(--text2));
}

.trendz-page .article-save-btn:hover,
.trendz-page .article-save-btn.is-saved {
  border-color: var(--tz-accent, var(--accent));
  color: var(--tz-accent, var(--accent));
}

/* ---- assets/share.css ---- */
/* Ayra ix — compact share control (dark, teal accent)
   All rules scoped under .ayx-share. Icons capped at 18px — never inherit page svg sizing. */
.ayx-share {
  --ayx-share-bg: rgba(10, 12, 20, 0.96);
  --ayx-share-border: rgba(255, 255, 255, 0.1);
  --ayx-share-text: rgba(244, 244, 245, 0.92);
  --ayx-share-muted: rgba(244, 244, 245, 0.55);
  --ayx-share-hover: rgba(0, 232, 219, 0.12);
  --ayx-share-accent: var(--accent, #00e8db);
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0.85rem 0 1.5rem;
  z-index: 40;
  max-width: 100%;
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  color: var(--ayx-share-text);
}

.ayx-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.38rem 0.72rem;
  border: 1px solid var(--ayx-share-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ayx-share-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ayx-share-btn:hover,
.ayx-share-btn:focus-visible,
.ayx-share-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--ayx-share-accent) 45%, transparent);
  background: var(--ayx-share-hover);
  color: #fff;
  outline: none;
}

.ayx-share svg,
.ayx-share-btn svg,
.ayx-share-menu svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  opacity: 0.9;
  color: inherit;
  fill: currentColor;
}

.ayx-share-btn svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
}

/* Closed by default — never leave channel list inline */
.ayx-share-menu {
  position: fixed;
  z-index: 50;
  box-sizing: border-box;
  width: max-content;
  min-width: 200px;
  max-width: min(220px, calc(100vw - 32px));
  padding: 0.45rem;
  border: 1px solid var(--ayx-share-border);
  border-radius: 12px;
  background: var(--ayx-share-bg);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  list-style: none;
  margin: 0;
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

/* .is-open is set on the menu itself (it's appended to <body>, not root —
   see assets/share.js positionMenu()), not on an ancestor. */
.ayx-share-menu.is-open {
  display: block !important;
  visibility: visible;
  pointer-events: auto;
}

.ayx-share-menu a,
.ayx-share-menu button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ayx-share-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.ayx-share-menu a:hover,
.ayx-share-menu a:focus-visible,
.ayx-share-menu button:hover,
.ayx-share-menu button:focus-visible {
  background: var(--ayx-share-hover);
  outline: none;
}

.ayx-share-menu span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ayx-share-note {
  margin: 0.15rem 0.35rem 0.2rem;
  padding: 0.45rem 0.5rem 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ayx-share-muted);
}

.ayx-share-toast {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 51;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ayx-share-accent) 35%, transparent);
  background: rgba(6, 18, 18, 0.96);
  color: var(--ayx-share-accent);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.ayx-share-toast.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* Sit cleanly in common meta rows */
.hub-article-meta .ayx-share,
.post-meta + .ayx-share,
.article .meta .ayx-share,
.article .author + .ayx-share {
  margin-top: 0.65rem;
}

/* Community hub hero — compact row under stats; accent inherits community --accent */
.community-page .cm-hub-share,
.community-page .hero-masthead-copy > .ayx-share {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.65rem;
  margin-bottom: 0;
}

.community-page .cm-hub-share .ayx-share {
  margin: 0;
}

/* AI Hub listing hero — left-aligned under title */
.ai-hub-page .hub-home-share {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.ai-hub-page .hub-home-share .ayx-share {
  margin: 0;
  z-index: 5;
}

.hub-article-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}

@media (max-width: 640px) {
  .ayx-share-menu {
    min-width: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ayx-share-btn,
  .ayx-share-menu a,
  .ayx-share-menu button,
  .ayx-share-toast {
    transition: none;
  }
}