/* Jevity Longevity Feed — magazine / SI.com-grade news layout */
.jf { --jf-serif: "Fraunces", Georgia, serif; --jf-sans: "Inter", sans-serif; }

/* filter bar */
.jf-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.jf-tabs { display: inline-flex; gap: 0.3rem; background: var(--bg-alt, #101116); border: 1px solid var(--border, rgba(243,237,224,0.1)); border-radius: 999px; padding: 0.3rem; }
.jf-tab { font: 600 0.82rem var(--jf-sans); color: var(--muted, #9b948a); background: none; border: none; border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer; white-space: nowrap; }
.jf-tab.is-active { background: var(--accent, #2dd4a7); color: #04130d; }
.jf-chips { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.jf-chips::-webkit-scrollbar { display: none; }
.jf-chip { font: 500 0.8rem var(--jf-sans); color: var(--text-soft, #d4ccba); background: transparent; border: 1px solid var(--border-strong, rgba(243,237,224,0.16)); border-radius: 999px; padding: 0.45rem 0.85rem; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.jf-chip:hover { border-color: var(--c); color: #fff; }
.jf-chip.is-active { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: var(--c); color: #fff; }

/* stream */
.jf-loading { display: flex; align-items: center; gap: 0.6rem; color: var(--muted, #9b948a); padding: 2.5rem 0; font-size: 0.92rem; }
.jf-spin { width: 18px; height: 18px; border: 2px solid var(--border-strong, rgba(243,237,224,0.2)); border-top-color: var(--accent, #2dd4a7); border-radius: 50%; animation: jfspin 0.8s linear infinite; }
@keyframes jfspin { to { transform: rotate(360deg); } }
.jf-empty { color: var(--muted, #9b948a); padding: 2.5rem 0; }

/* hero featured */
.jf-hero { margin-bottom: 1.2rem; }
.jf-hero .jf-card__link { display: block; }
.jf-media--big { aspect-ratio: 21 / 9; }
.jf-card--hero .jf-card__body { padding: 1.2rem 0 0; }
.jf-card--hero .jf-card__title { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.jf-card__sum { font-size: 0.98rem; color: var(--text-soft, #d4ccba); line-height: 1.55; margin-top: 0.5rem; max-width: 70ch; }

/* grid */
.jf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.3rem 1.2rem; }
.jf-card { animation: jfrise 0.5s ease both; }
@keyframes jfrise { from { opacity: 0; transform: translateY(10px); } }
.jf-card__link { text-decoration: none; display: block; }
.jf-card__link:hover .jf-media img, .jf-card__link:hover .jf-grad { transform: scale(1.05); }

.jf-media { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--bg-alt, #101116); border: 1px solid var(--border, rgba(243,237,224,0.08)); }
.jf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.jf-grad { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 1rem; transition: transform 0.4s ease;
  background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--g) 42%, #0a0b0e), #0a0b0e 75%); }
.jf-grad span { font: 500 0.9rem var(--jf-serif); color: color-mix(in srgb, var(--g) 70%, #fff); opacity: 0.9; }
.jf-cat { position: absolute; top: 0.7rem; left: 0.7rem; font: 600 0.64rem var(--jf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #04130d; background: var(--c); padding: 0.28rem 0.6rem; border-radius: 999px; }

.jf-card__body { padding: 0.75rem 0.1rem 0; }
.jf-card__title { font: 500 1.05rem/1.3 var(--jf-serif); letter-spacing: -0.01em; color: var(--text, #f3ede0); margin: 0; transition: color 0.15s; }
.jf-card__link:hover .jf-card__title { color: var(--accent, #2dd4a7); }
.jf-card__meta { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem; font-size: 0.76rem; color: var(--muted, #9b948a); }
.jf-fav { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.jf-src { color: var(--text-soft, #d4ccba); font-weight: 500; }
.jf-dot { opacity: 0.5; }

/* homepage section wrapper */
.jf-home { padding: 4rem 0 1rem; }
.jf-home__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.jf-home__kicker { font: 500 0.78rem var(--jf-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, #2dd4a7); margin-bottom: 0.5rem; }
.jf-home__head h2 { font: 400 clamp(1.9rem, 4vw, 2.8rem) var(--jf-serif); letter-spacing: -0.02em; color: var(--text, #f3ede0); }
.jf-home__all { font: 500 0.92rem var(--jf-sans); color: var(--accent, #2dd4a7); text-decoration: none; white-space: nowrap; }
.jf-home__all:hover { text-decoration: underline; }

/* dedicated /feed/ page hero */
.jf-page { padding: 4.5rem 0 5rem; }
.jf-page__head { margin-bottom: 2rem; }
.jf-page__kicker { font: 500 0.8rem var(--jf-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, #2dd4a7); margin-bottom: 0.9rem; }
.jf-page__head h1 { font: 400 clamp(2.4rem, 6vw, 4rem) var(--jf-serif); letter-spacing: -0.025em; line-height: 1.02; color: var(--text, #f3ede0); margin-bottom: 0.8rem; }
.jf-page__head h1 em { font-style: italic; color: var(--accent, #2dd4a7); }
.jf-page__lead { font-size: 1.1rem; color: var(--text-soft, #d4ccba); max-width: 62ch; line-height: 1.6; }
.jf-updated { font-size: 0.78rem; color: var(--muted, #9b948a); margin-top: 1.6rem; }

@media (max-width: 640px) { .jf-media--big { aspect-ratio: 16 / 10; } .jf-grid { gap: 1.1rem 1rem; } }

/* homepage "live" pulse on the top-of-page feed */
.jf-home--top { padding-top: clamp(2.5rem, 6vh, 4rem); }
.jf-home__kicker .jf-live { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2dd4a7; margin-right:.45rem; vertical-align:middle; box-shadow:0 0 0 0 rgba(45,212,167,.6); animation: jfLive 1.8s ease-out infinite; }
@keyframes jfLive { 0%{box-shadow:0 0 0 0 rgba(45,212,167,.55)} 70%{box-shadow:0 0 0 7px rgba(45,212,167,0)} 100%{box-shadow:0 0 0 0 rgba(45,212,167,0)} }