html, body { margin: 0; background: #050505; overflow-x: hidden; }
  body { font-family: 'Inter', sans-serif; }
  ::selection { background: #EC4D20; color: #050505; }
  :focus-visible { outline: 2px solid #EC4D20; outline-offset: 3px; }

  .grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 60;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  .media-img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(45%) contrast(1.05) brightness(0.85) saturate(0.92);
    transition: filter 0.7s ease;
    will-change: transform, filter;
    transform-origin: center;
  }
  .media-card:hover .media-img,
  .media-card:focus-visible .media-img { filter: grayscale(0%) contrast(1.02) brightness(0.97) saturate(1.05); }

  .chip {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.35rem 0.7rem; border-radius: 2px; white-space: nowrap;
  }

  .filter-chip {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.55rem 1.1rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid rgba(237,234,226,0.16); color: #86837C;
    transition: all 0.3s ease; cursor: pointer; background: transparent;
  }
  .filter-chip:hover { color: #EDEAE2; border-color: rgba(237,234,226,0.32); }
  .filter-chip.active { background: #EC4D20; border-color: #EC4D20; color: #050505; }

  .filters-row::-webkit-scrollbar { display: none; }
  .filters-row { scrollbar-width: none; }

  input[type="text"]::placeholder { color: #86837C; }

  @media (prefers-reduced-motion: reduce) {
    .media-img { transition: none; }
  }