/* ═══ EXPLORE ALL FEATURES ═══ prefix ex- ═══
   Every colour comes from il-design.css. styles.css animates `all` on links
   and buttons, including their geometry, so each one here names only the
   colours it animates. */
.ex-shell { max-width: 1080px; margin: 0 auto;
  padding: calc(var(--nav-h, 67px) + 26px) 16px calc(40px + var(--bn-h, 0px)); }

.ex-hero { margin: 0 0 18px; padding: clamp(18px, 4vw, 30px); border-radius: var(--r-lg, 20px);
  border: 1px solid var(--line, rgba(201,162,39,.16));
  background: radial-gradient(90% 150% at 0% 0%, rgba(201,162,39,.18), transparent 62%), var(--s-1, #0E0D0A); }
.ex-kicker { margin: 0 0 4px; color: var(--g-300, #D9B948); font-size: .7rem; font-weight: 900;
  letter-spacing: .13em; text-transform: uppercase; }
.ex-hero h1 { margin: 0 0 6px; color: var(--ink-hi, #fff); font-family: 'Cinzel', serif;
  font-size: clamp(1.45rem, 4.4vw, 2.2rem); line-height: 1.2; }
.ex-lead { margin: 0 0 16px; max-width: 62ch; color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .9rem; line-height: 1.6; }

.ex-search { position: relative; display: block; max-width: 560px; }
.ex-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index: 1;
  color: var(--g-300, #D9B948); pointer-events: none; }
/* !important on the padding and radius: the site-wide input rules in il-design.css
   would otherwise put the words underneath the magnifying glass. */
.ex-search input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 16px 0 44px !important;
  border-radius: var(--r-pill, 999px) !important; border: 1px solid var(--line-hot, rgba(201,162,39,.42));
  background: var(--s-0, #080806); color: var(--ink-hi, #fff); font: inherit; font-size: 16px; outline: 0;
  transition: border-color .16s !important; }
.ex-search input:focus { border-color: var(--g-200, #E6CE74); }
.ex-search input::placeholder { color: var(--ink-low, rgba(255,255,255,.42)); }

.ex-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ex-chips::-webkit-scrollbar { display: none; }
.ex-chip { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line, rgba(201,162,39,.16)); background: var(--s-1, #0E0D0A);
  color: var(--ink-mid, rgba(255,255,255,.62)); font: inherit; font-size: .79rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color .16s, border-color .16s, color .16s !important; }
.ex-chip:hover { color: var(--ink-hi, #fff); border-color: var(--line-hot, rgba(201,162,39,.42)); }
.ex-chip[aria-pressed="true"] { background: linear-gradient(160deg, var(--g-200, #E6CE74), var(--g-500, #AC8A1E));
  border-color: transparent; color: #14120A; }

.ex-count { margin: 2px 2px 16px; color: var(--ink-low, rgba(255,255,255,.42)); font-size: .76rem; font-weight: 600; }

.ex-sec { margin: 0 0 26px; scroll-margin-top: calc(var(--nav-h, 67px) + 14px); }
.ex-sec[hidden] { display: none; }
.ex-sec h2 { margin: 0 0 2px; color: var(--ink-hi, #fff); font-family: 'Cinzel', serif; font-size: 1.14rem; }
.ex-sec > p { margin: 0 0 12px; color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .8rem; line-height: 1.5; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }

.ex-card { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 76px; padding: 12px 13px;
  border-radius: var(--r-md, 14px); border: 1px solid var(--line, rgba(201,162,39,.16)); background: var(--s-1, #0E0D0A);
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .16s, border-color .16s !important; }
.ex-card[hidden] { display: none; }
a.ex-card:hover, a.ex-card:focus-visible { border-color: var(--line-hot, rgba(201,162,39,.42)); background: var(--s-2, #14120D); }
a.ex-card:active { background: rgba(201,162,39,.14); }
.ex-ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(201,162,39,.13); color: var(--g-200, #E6CE74); }
.ex-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-t b { color: var(--ink-hi, #fff); font-size: .92rem; font-weight: 800; line-height: 1.25; }
.ex-t small { color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .76rem; line-height: 1.42; }
.ex-go { flex: 0 0 auto; display: flex; color: var(--ink-low, rgba(255,255,255,.42)); }

.ex-card.is-soon { border-style: dashed; cursor: default; }
.ex-card.is-soon .ex-ic { background: rgba(255,255,255,.05); color: var(--ink-low, rgba(255,255,255,.42)); }
.ex-card.is-soon .ex-t b { color: var(--ink-mid, rgba(255,255,255,.62)); }
.ex-soon { flex: 0 0 auto; padding: 3px 8px; border-radius: var(--r-pill, 999px); border: 1px solid var(--line, rgba(201,162,39,.16));
  color: var(--g-300, #D9B948); font-size: .63rem; font-weight: 800; white-space: nowrap; }

.ex-empty { padding: 40px 18px; text-align: center; border-radius: var(--r-md, 14px); border: 1px dashed var(--line, rgba(201,162,39,.16)); }
.ex-empty[hidden] { display: none; }
.ex-empty p { margin: 0 0 12px; color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .88rem; }
.ex-empty button { min-height: 42px; padding: 0 18px; border-radius: var(--r-pill, 999px); border: 1px solid var(--line-hot, rgba(201,162,39,.42));
  background: none; color: var(--g-200, #E6CE74); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }

@media (max-width: 520px) {
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
}