/* Jevity Discover — the longevity marketplace. AirBnB structure, Jevity dark skin. */

:root {
  --dc-teal: #2dd4a7; --dc-teal-soft: #7cf0cf;
  --dc-ink: #f3f6f5; --dc-soft: #a9b3b8; --dc-faint: #6a747a;
  --dc-line: rgba(255,255,255,.09); --dc-card: rgba(255,255,255,.03);
}

.dc { color: var(--dc-ink); font-family: "Inter", system-ui, sans-serif; padding-bottom: 5rem; }
.dc a { color: inherit; text-decoration: none; }

/* hero */
.dc-hero { max-width: 1180px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 2.4rem) 1.6rem; text-align: center; }
.dc-kicker { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dc-teal); font-weight: 600; }
.dc-hero h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; letter-spacing: -.02em; line-height: 1.03; font-size: clamp(2.4rem, 6.5vw, 4.4rem); margin: .7rem 0 1rem; }
.dc-hero h1 em { font-style: italic; color: var(--dc-teal); }
.dc-sub { color: var(--dc-soft); max-width: 60ch; margin: 0 auto 2rem; font-size: 1.02rem; line-height: 1.7; }

.dc-search { display: flex; align-items: center; gap: .6rem; max-width: 640px; margin: 0 auto; background: rgba(255,255,255,.05); border: 1px solid var(--dc-line); border-radius: 999px; padding: .5rem .6rem .5rem 1.3rem; transition: border-color .25s, box-shadow .25s; }
.dc-search:focus-within { border-color: rgba(45,212,167,.5); box-shadow: 0 0 0 4px rgba(45,212,167,.1), 0 20px 50px -24px rgba(45,212,167,.5); }
.dc-search__icon { font-size: 1.3rem; color: var(--dc-teal); }
.dc-search input { flex: 1; background: none; border: none; outline: none; color: var(--dc-ink); font-size: 1.05rem; font-family: inherit; padding: .55rem 0; }
.dc-search input::placeholder { color: var(--dc-faint); }
.dc-search__clear { border: none; background: rgba(255,255,255,.08); color: var(--dc-soft); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: .8rem; }
.dc-quick { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.dc-quick button { background: none; border: 1px solid var(--dc-line); color: var(--dc-soft); font: inherit; font-size: .84rem; padding: .35rem .85rem; border-radius: 999px; cursor: pointer; transition: all .2s; }
.dc-quick button:hover { color: var(--dc-ink); border-color: rgba(45,212,167,.4); }

/* category ribbon (AirBnB-style) */
.dc-ribbon { position: sticky; top: 58px; z-index: 20; display: flex; gap: .3rem; overflow-x: auto; padding: 1rem clamp(1.2rem, 5vw, 2.4rem); max-width: 1180px; margin: 0 auto; scrollbar-width: none; background: #0a0b0e; box-shadow: 0 1px 0 var(--dc-line); }
.dc-ribbon::-webkit-scrollbar { display: none; }
.dc-cat { flex-shrink: 0; display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; background: none; border: none; cursor: pointer; color: var(--dc-faint); font: inherit; font-size: .78rem; padding: .5rem .9rem; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.dc-cat i { font-size: 1.3rem; font-style: normal; filter: grayscale(.4); transition: filter .2s; }
.dc-cat:hover { color: var(--dc-soft); }
.dc-cat.active { color: var(--dc-ink); border-color: var(--dc-ink); }
.dc-cat.active i { filter: none; }

/* controls */
.dc-controls { max-width: 1180px; margin: .4rem auto 1.4rem; padding: 0 clamp(1.2rem, 5vw, 2.4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dc-goals { display: flex; flex-wrap: wrap; gap: .4rem; }
.dc-goal { background: var(--dc-card); border: 1px solid var(--dc-line); color: var(--dc-soft); font: inherit; font-size: .82rem; padding: .4rem .85rem; border-radius: 999px; cursor: pointer; transition: all .2s; }
.dc-goal:hover { color: var(--dc-ink); }
.dc-goal.active { background: rgba(45,212,167,.12); border-color: rgba(45,212,167,.5); color: var(--dc-teal-soft); }
.dc-controls__right { display: flex; align-items: center; gap: 1.2rem; }
.dc-count { font-size: .84rem; color: var(--dc-faint); white-space: nowrap; }
.dc-sort { font-size: .8rem; color: var(--dc-faint); display: inline-flex; align-items: center; gap: .5rem; }
.dc-sort select { background: var(--dc-card); border: 1px solid var(--dc-line); color: var(--dc-ink); font: inherit; font-size: .84rem; padding: .4rem .7rem; border-radius: 10px; cursor: pointer; }

/* grid */
.dc-grid { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 2.4rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 1.4rem; }
.dc-card { display: flex; flex-direction: column; background: var(--dc-card); border: 1px solid var(--dc-line); border-radius: 20px; overflow: hidden; cursor: pointer; transition: transform .3s cubic-bezier(.16,.84,.34,1), border-color .3s, box-shadow .3s; animation: dcIn .5s cubic-bezier(.16,.84,.34,1) both; }
.dc-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.18); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
@keyframes dcIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dc-media { position: relative; aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; }
.dc-media img { width: 100%; height: 100%; object-fit: cover; }
.dc-media__glyph { font-size: 2.6rem; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.dc-media__mono { font-family: "Fraunces", serif; font-size: 2.2rem; font-weight: 500; color: rgba(255,255,255,.92); letter-spacing: .02em; }
.dc-tag { position: absolute; top: .7rem; left: .7rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: .28rem .6rem; border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); color: #fff; }
.dc-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.dc-title { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.dc-desc { color: var(--dc-soft); font-size: .84rem; line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-metar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.dc-badge { font-size: .78rem; font-weight: 600; color: var(--dc-teal-soft); display: inline-flex; align-items: center; gap: .3rem; }
.dc-chip { font-size: .7rem; color: var(--dc-faint); border: 1px solid var(--dc-line); padding: .18rem .5rem; border-radius: 999px; }
.dc-score { font-family: "Fraunces", serif; font-size: 1.05rem; color: var(--dc-ink); }

.dc-empty { text-align: center; padding: 3rem 1rem; color: var(--dc-soft); }
.dc-reset { margin-top: 1rem; background: var(--dc-teal); color: #04130d; border: none; font: 600 .9rem inherit; padding: .7rem 1.4rem; border-radius: 999px; cursor: pointer; }
.dc-foot { max-width: 900px; margin: 3rem auto 0; padding: 0 clamp(1.2rem, 5vw, 2.4rem); text-align: center; font-size: .74rem; color: var(--dc-faint); line-height: 1.6; }

@media (max-width: 560px) {
  .dc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
  .dc-media__glyph { font-size: 2rem; }
}