/* /features: every feature on one page, chapter by chapter, with the tally above and "more to come" below.
   The chapter tints come from chapters.css (data-tint). */

/* ---------- The tally ---------- */

.tally { padding: clamp(48px, 7vw, 84px) 0; border-bottom: 1px solid var(--ash-15); background: linear-gradient(var(--night-deep), var(--night)); }
.tally-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: end; }
.tally-item { display: grid; gap: 6px; margin: 0; }
.tally-num {
  font-family: var(--font-inscription); font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: 1; color: var(--mist);
  text-shadow: 0 0 40px rgb(183 163 240 / 0.35);
}
.tally-item:first-child .tally-num { color: var(--crystal); text-shadow: 0 0 44px rgb(243 199 106 / 0.4); }
.tally-label { font: 600 0.75rem/1.4 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); max-width: 22ch; }
.tally-more { grid-column: 1 / -1; margin: 6px 0 0; }
@media (max-width: 800px) { .tally-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- The chapter filter ---------- */

.fl-filter {
  position: sticky; top: 64px; z-index: 20; padding: 12px 0;
  background: rgb(15 11 30 / 0.86); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--ash-15);
}
.fl-filter-inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.fl-filter-inner::-webkit-scrollbar { display: none; }
.fl-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--ash-20); color: var(--mist-80); text-decoration: none; font-weight: 600; font-size: 0.875rem; white-space: nowrap;
  transition: color 120ms, border-color 120ms, background-color 120ms;
}
.fl-chip .crystal-glyph { width: 8px; height: 12px; }
.fl-chip:hover { color: var(--mist); border-color: rgb(var(--tint-rgb, 183 163 240) / 0.6); }
.fl-chip.is-on { color: var(--mist); border-color: rgb(var(--tint-rgb, 183 163 240) / 0.75); background: rgb(var(--tint-rgb, 183 163 240) / 0.16); }
.fl-chip-count { font: 500 0.75rem/1 var(--font-mono); color: var(--ash); }

/* ---------- One chapter's features ---------- */

.fl-list { scroll-margin-top: 120px; }
.fl-chapter { padding: clamp(64px, 9vw, 112px) 0; border-bottom: 1px solid var(--ash-15); scroll-margin-top: 120px; background: radial-gradient(60% 40% at 0% 0%, rgb(var(--tint-rgb) / 0.07), transparent 70%); }
.fl-chapter[hidden] { display: none; }
.fl-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 5vw, 52px); justify-items: start; }
.fl-head h2 a { color: var(--mist); text-decoration: none; }
.fl-head h2 a:hover { color: var(--element); }

.fl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.fl-grid + .fl-grid { margin-top: 18px; }
.fl-grid-text { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.fl-card { scroll-margin-top: 130px; }
.fl-card a {
  display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--ash-20); color: var(--mist); text-decoration: none;
  background: linear-gradient(165deg, rgb(var(--tint-rgb) / 0.08), rgb(27 21 51 / 0.82) 40%);
  transition: border-color 160ms, translate 220ms var(--ease-out), box-shadow 220ms;
}
.fl-card a:hover, .fl-card a:focus-visible {
  outline: none; border-color: rgb(var(--tint-rgb) / 0.55); translate: 0 -3px;
  box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(var(--tint-rgb) / 0.2);
}
.fl-art { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--night-deep); }
.fl-art img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-out); }
.fl-card a:hover .fl-art img { scale: 1.04; }
.fl-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(8 6 15 / 0.55)); pointer-events: none; }
.fl-body { display: grid; gap: 10px; align-content: start; padding: 20px 20px 22px; }
.fl-title { display: flex; align-items: center; gap: 10px; font: 600 1.0625rem/1.35 var(--font-ui); }
.fl-title .crystal-glyph { flex: none; width: 9px; height: 14px; }
.fl-body .tag { justify-self: start; }
.fl-text { color: var(--mist-80); font-size: 0.9375rem; line-height: 1.6; }
.fl-card.is-text a { grid-template-rows: 1fr; background: linear-gradient(165deg, rgb(var(--tint-rgb) / 0.13), rgb(27 21 51 / 0.82) 55%); }
.fl-card.is-text .fl-body { padding-top: 24px; }

/* ---------- More to come ---------- */

.more-to-come {
  padding: clamp(80px, 11vw, 140px) 0; scroll-margin-top: 64px;
  background: radial-gradient(70% 55% at 50% 0%, rgb(227 154 196 / 0.12), transparent 70%), var(--night-deep);
}
.mtc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.mtc-col { padding: clamp(24px, 3vw, 36px); border-radius: 18px; border: 1px solid var(--ash-20); background: var(--panel); }
.mtc-col:first-child { background: radial-gradient(90% 90% at 100% 0%, rgb(227 154 196 / 0.13), transparent 70%), rgb(37 29 69 / 0.5); }
.mtc-head { margin-bottom: 18px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--petal); }
.mtc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mtc-list li { position: relative; padding-left: 26px; }
.mtc-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 8px; height: 8px; rotate: 45deg;
  background: var(--element, var(--petal)); box-shadow: 0 0 10px rgb(var(--tint-rgb, 227 154 196) / 0.6);
}
.mtc-list a { color: inherit; text-decoration: none; }
.mtc-list a:hover strong { color: var(--element, var(--petal)); }
.mtc-list strong { display: block; color: var(--mist); font-weight: 600; }
.mtc-list span { display: block; color: var(--mist-80); font-size: 0.9375rem; line-height: 1.55; }

/* ---------- The home page's band and the hub's link to the full list ---------- */

.all-band { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--ash-15); }
.all-band-inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 48px); align-items: center;
  padding: clamp(24px, 4vw, 40px); border-radius: 20px; border: 1px solid rgb(243 199 106 / 0.28);
  background: radial-gradient(80% 120% at 0% 50%, rgb(243 199 106 / 0.12), transparent 60%), var(--panel);
}
.all-band-num { font-family: var(--font-inscription); font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: 1; color: var(--crystal); text-shadow: 0 0 44px rgb(243 199 106 / 0.4); }
.all-band-text { display: grid; gap: 6px; }
.all-band-text .lead { margin: 0; }
@media (max-width: 760px) { .all-band-inner { grid-template-columns: 1fr; } }