/* ================= RESET ================= */


          :root {
              --bg: #000;
              --bg-soft: #0f0f0f;
              --text: #fff;
              --muted: #aaa;
              --yellow: #ffc800;
          }


          /* ================= HEADER ================= */







          /* ================= HERO ================= */
          .heros {
              height: 100vh;
              background: url("/photos/jonathan-velasquez-c1ZN57GfDB0-unsplash.jpg") center / cover no-repeat;
              position: relative;
              display: flex;

              align-items: center;
              padding: 0 80px;
          }

          .hero-content {
              max-width: 1200px;
              padding: 0 2rem;
          }

          .hero-content h1 {
              font-size: clamp(2.2rem, 5vw, 3.2rem);
              color: var(--yellow);
          }

          .hero-content p {
              max-width: 520px;
              color: #ddd;
              margin-top: 1rem;
          }

          /* ================= CONTROLS ================= */
          .controls {
              max-width: 1200px;
              margin: auto;
              padding: 2rem;
              display: flex;
              flex-wrap: wrap;
              gap: 1rem;
              align-items: center;
          }

          /* FILTERS */
          .filters {
              display: flex;
              flex-wrap: wrap;
              gap: .75rem;
          }

          .filters button {
              background: #111;
              border: none;
              color: #fff;
              padding: .6rem 1.2rem;
              cursor: pointer;
              font-size: .85rem;
              transition: .2s;
          }

          .filters button:hover {
              background: #1a1a1a;
          }

          .filters button.active {
              background: var(--yellow);
              color: #000;
              font-weight: 600;
          }

          /* SEARCH */
          #search {
              margin-left: auto;
              background: #111;
              border: 1px solid #222;
              color: #fff;
              padding: .7rem 1rem;
              min-width: 260px;
              outline: none;
          }

          #search::placeholder {
              color: #777;
          }

          /* ================= COUNT ================= */
          .count {
              max-width: 1200px;
              margin: auto;
              padding: 0 2rem 1rem;
              color: var(--muted);
              font-size: .85rem;
          }

          /* ================= GRID ================= */
          .grid {
              max-width: 1350px;
              margin: auto;
              padding: 0 2rem 4rem;
              display: flex;
              flex-wrap: wrap;
              gap: 2rem;
          }

          /* ================= CARD ================= */
          .card {
              background: var(--bg-soft);
              position: relative;
              padding: 5px;
              transition: transform .3s ease;
          }

          .card:hover {
              transform: translateY(-4px);
          }

          /* TAG */
          .tag {
              position: absolute;
              top: .75rem;
              left: .75rem;
              background: var(--yellow);
              color: #000;
              padding: .3rem .6rem;
              font-size: .7rem;
              font-weight: 600;
              z-index: 2;
          }

          /* THUMB */
          .thumb {
              height: 200px;
              background: #222;
          }

          .thumb.orange {
              background-image: url(/photos/Yooma.jpg);
              background-size: cover;
              background-position: center;
              border-radius: 5px;
          }

          .thumb.light {
              background: #eaeaea;
          }

          .thumb.city {
              background-image: url(/photos/alison.jpg);
              background-size: cover;
              background-position: center;
              border-radius: 5px;
          }
          .thumb.photo {
              background-image: url(/photos/innov\ photo.png);
              background-size: cover;
              background-position: center;
              border-radius: 5px;
          }

          /* TEXT */
          .card time {
              display: block;
              font-size: .75rem;
              color: var(--muted);
              margin: .75rem;
          }

          .card h2 {
              font-size: 1.05rem;
              margin: 0 .75rem;
              color: var(--yellow);
          }

          .card p {
              font-size: .85rem;
              margin: .5rem .75rem 1rem;
              color: #ccc;
          }




          /* ================= RESPONSIVE ================= */
          @media (max-width: 768px) {
              .nav-desktop {
                  display: none;
              }

              #search {
                  margin-left: 0;
                  width: 100%;
              }
          }