/* =====================================================================
   HUB-01 — the listing pages' filter form and the events view toggle.
   Token references only; the form controls follow the join form's field
   treatment (white field, ink border, --focus ring) so the site has one
   control language. No colour value appears here (tokens.css only).
   ===================================================================== */

.hub-listing{padding-top:0;padding-bottom:0}

.hubf{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-end;
  padding:26px 0 30px;border-bottom:1px solid var(--rule-hair)}
.hubf-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.hubf-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-page)}
.hubf input[type="text"],.hubf select{
  background:var(--ground-field);color:var(--on-field);
  border:1px solid var(--ink);border-radius:6px;
  padding:9px 12px;font-family:var(--sans);font-size:15px;line-height:1.3}
.hubf input[type="text"]{min-width:220px}
.hubf input:focus-visible,.hubf select:focus-visible,
.hubf input[type="checkbox"]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.hubf-set{border:1px solid var(--rule-hair);border-radius:8px;
  padding:12px 16px 14px;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.hubf-set legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:0 6px}
.hubf-opt{display:inline-flex;align-items:center;gap:7px;font-size:15px}
.hubf-n{color:var(--on-page-soft);font-size:13px}

.hubf-actions{margin-left:auto}
.hubf-apply{border:0;cursor:pointer;font-family:var(--sans)}
.hubf-clear{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hubf-count{margin:0;font-size:14px;color:var(--on-page-body)}

/* the Upcoming | Past toggle — links, not tabs; the active one is marked by
   aria-current and drawn with the nav's own underline treatment. */
.ev-toggle{padding:26px 34px 0}
.ev-toggle .in{display:flex;gap:26px}
.ev-toggle a{font-size:15px;font-weight:600;padding:6px 2px}
.ev-toggle a[aria-current="page"]{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.ev-toggle a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.hub-none{font-size:16px;color:var(--on-page-body)}

@media (max-width:760px){
  .hubf{gap:14px 20px}
  .hubf-actions{margin-left:0}
}

/* HUB-05 — the swap region's loading state and the Load more footer. The
   dim is this feature's only motion and it lives entirely behind
   no-preference: under prefers-reduced-motion the region updates with no
   transition and no dim (aria-busy still carries the state for AT). */
@media (prefers-reduced-motion:no-preference){
  .hub-results{transition:opacity .18s ease}
  .hub-results.is-loading{opacity:.45}
}
.hub-foot{padding:0 0 56px}
.hub-foot .in{display:flex;align-items:center;gap:26px}
.hub-showing{margin:0;font-size:14px;color:var(--on-page-body)}

/* =====================================================================
   HUB-14 — the insights listing's two-up cards (hub-listings-mockup-v1
   §3). One column ≤820px. Tokens only; shadows are color-mix over --ink
   as the mockup wrote them. The cards share the featured insight's image
   rules (exact-4:3 box, 4:3 art, cover as the belt) and the fallback
   panel is plum with the format in gold — this palette's dark-ground
   pairing (8.2161 on plum, TOK).
   ===================================================================== */
.ig{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} /* the gap is .ev-head's (HUB-16b) */
@media (max-width:820px){.ig{grid-template-columns:1fr}}
/* HUB-17 (ruling 7) — UNBOXED: the HUB-14 fill, hairline, radius and
   shadow are deleted; the text sits on the band and the IMAGE carries the
   8px corners (= .btn, components/buttons.css). The focus outline still
   wraps the whole link. */
.ic{
  display:flex;flex-direction:column;height:100%;gap:0;
  color:var(--on-page);
  text-decoration:none;
}
.ic:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.ic-media{position:relative;aspect-ratio:4/3;background:var(--plum);overflow:hidden;container-type:inline-size;border-radius:8px /* = .btn, components/buttons.css */}
.ic-media img{display:block;width:100%;height:100%;object-fit:cover}
/* no-image fallback: format in gold mono top-left, gold play ring for
   video, NO title (it sits directly below the panel) — aria-hidden. */
.ic-fb{position:absolute;inset:0;background:var(--plum);display:grid;place-items:center}
.ic-fb::after{content:"";position:absolute;inset:0;background-image:url(../../img/longitude-texture.svg);background-size:22cqw 22cqw;opacity:.028;pointer-events:none}
.ic-fb-k{position:absolute;left:6cqw;top:5.5cqw;font-family:var(--mono);font-size:2.6cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);z-index:1}
.ic-fb-play{width:16cqw;height:16cqw;border-radius:50%;border:.5cqw solid var(--gold);color:var(--gold);display:grid;place-items:center;z-index:1}
.ic-fb-play svg{width:40%;height:40%;margin-left:8%}
.ic-body{padding:18px 0 0;display:flex;flex-direction:column;gap:12px;flex:1}
/* HUB-17 (rulings 3+4): sans sentence case; the tag's pill chrome is gone.
   --on-page-soft stays (slate fails AA on cream — HUB-13's measurement). */
.ic-eye{font-family:var(--sans);font-size:15px;color:var(--on-page-soft);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ic-eye .tag{font-weight:600;color:var(--on-page)}
.ic-title{
  font-family:var(--serif);font-size:25px;line-height:1.22;margin:0;font-weight:700; /* HUB-17: 700, like every heading */
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.18em;
}
.ic-dek{
  font-size:16.5px;line-height:1.55;color:var(--on-page-body);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ic-cta{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent);margin-top:auto;padding-top:6px}
.ic:hover .ic-title,.ic:focus-visible .ic-title{text-decoration-color:currentColor}
/* HUB-17 (ruling 1): the lift/shadow motion block is DELETED, not
   neutralised — feedback is the title underline and the --focus ring. */

/* =====================================================================
   HUB-16 — the filter bar, popovers, chips and the mobile drawer
   (hub-filters-mockup-v1). The PLAIN form above stays the no-JS baseline:
   without html.js the bar/chips/dialog never display; with it, the plain
   block never does. Tokens + color-mix over tokens only. Motion (the
   drawer slide) is behind no-preference. --rule-mid is the mockup's
   mid-weight hairline, expressed inline as color-mix over --ink.
   ===================================================================== */
html:not(.js) .hubf-bar,
html:not(.js) .hubf-chips{display:none}
html.js .hubf-plain{display:none}
html.js .hubf{border-bottom:0;padding-bottom:0;display:block}

/* HUB-17 (ruling 8): the two hairlines become a soft CREAM TRAY (8px
   corners = .btn, components/buttons.css); the controls inside take the
   page ground so they still read as controls. Behaviour untouched. */
.hubf-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;
  background:var(--ground-alt);border-radius:8px}
.hubf-search{display:flex;align-items:center;gap:8px;min-width:260px;height:40px;padding:0 14px;
  border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);border-radius:999px;
  background:var(--ground-page);color:var(--on-page-soft)}
.hubf-search svg{width:16px;height:16px;flex:none}
/* HUB-16a — THE PILL IS THE FIELD; the input inside it is BARE. Written at
   (0,4,1) because the plain form's `.hubf input[type="text"]` (0,2,1) was
   winning and drawing its bordered, rounded box INSIDE the pill. Focus
   stays visible on the PILL via :focus-within below (2.4.7); the input's
   own outline is suppressed at higher specificity than the legacy
   `.hubf input:focus-visible` rule. */
.hubf .hubf-search input[type="text"]{
  border:0;background:transparent;border-radius:0;box-shadow:none;outline:none;
  padding:0;min-width:0;flex:1;
  font-family:var(--sans);font-size:15px;color:var(--on-field);
}
.hubf .hubf-search input[type="text"]:focus-visible{outline:none}
.hubf-search:focus-within{outline:3px solid var(--focus);outline-offset:2px}

.hubf-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);border-radius:999px;
  background:var(--ground-page);font:500 15px/1 var(--sans);color:var(--on-page);cursor:pointer}
.hubf-pill:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hubf-pill[aria-expanded="true"]{border-color:var(--ink);background:var(--ground-field)}
.hubf-pill.on{border-color:var(--ink)}
.hubf-cv{width:10px;height:10px;opacity:.7}
.hubf-ct{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:12px;font-weight:600}
.hubf-sortwrap{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:14px;color:var(--on-page-body)}

.hubf-pw{position:relative}
.hubf-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:5;width:300px;
  background:var(--ground-field);border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);border-radius:8px;
  box-shadow:0 24px 48px -24px color-mix(in srgb,var(--ink) 45%,transparent);padding:10px 8px 8px}
.hubf-pop--scroll{max-height:320px;overflow-y:auto}
.hubf-pop--sort{left:auto;right:0;width:220px}
.hubf-pop .hubf-opt{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:6px;
  font-family:var(--sans);font-size:15px;color:var(--on-page)}
.hubf-pop .hubf-opt:hover{background:var(--cream)}
.hubf-pop .hubf-n{margin-left:auto;font-size:13px;color:var(--on-page-soft)}
.hubf-pop-ft{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-top:1px solid var(--rule-hair);margin-top:6px;padding:10px 10px 4px;font-family:var(--sans);font-size:14px}
.hubf-facet-clear{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--accent)}
.hubf-facet-clear:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hubf-hint{color:var(--on-page-soft)}

.hubf-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0 0;font-family:var(--sans)}
.hubf-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 12px;border-radius:999px;
  background:var(--ground-alt);border:1px solid var(--rule-hair);font:400 14px/1 var(--sans);color:var(--on-alt);cursor:pointer}
.hubf-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hubf-chip-k{font-family:var(--sans);font-size:14px;color:var(--on-page-soft)} /* HUB-17 ruling 3: sans, floor 14px */
.hubf-chip b{font-weight:500}
.hubf-chip-x{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--on-page-soft)}
.hubf-clearall{font-size:14px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.hubf-clearall:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hubf-count2{margin-left:auto;font-size:14px;color:var(--on-page-body)}

/* the Filters pill exists for MOBILE only; facet pills + sort label flip */
.hubf-pill--filters{display:none}

/* ── the drawer ── */
.hubf-dialog{position:fixed;inset:0 0 0 auto;width:min(420px,100vw);height:100dvh;max-height:100dvh;
  margin:0;padding:0;border:0;background:var(--ground-page);color:var(--on-page);
  display:flex;flex-direction:column;font-family:var(--sans)}
.hubf-dialog:not([open]){display:none}
.hubf-dialog::backdrop{background:color-mix(in srgb,var(--ink) 45%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .hubf-dialog[open]{animation:hubf-slide .22s ease}
  @keyframes hubf-slide{from{transform:translateX(100%)}to{transform:translateX(0)}}
}
/* body scroll lock while the drawer is open — MEASURED: the native dialog
   does NOT lock the page behind it; :has() is the lock. */
body:has(.hubf-dialog[open]){overflow:hidden}
.hubf-dlg-h{display:flex;justify-content:space-between;align-items:center;padding:18px 16px;border-bottom:1px solid var(--rule-hair)}
.hubf-dlg-h h2{font-family:var(--serif);font-size:26px;margin:0;font-weight:400}
.hubf-dlg-x{width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);
  background:var(--ground-page);color:var(--on-page);display:grid;place-items:center;font-size:18px;cursor:pointer}
.hubf-dlg-x:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hubf-dlg-b{flex:1;overflow-y:auto;padding:4px 16px}
.hubf-grp{border-bottom:1px solid var(--rule-hair);padding:14px 0}
.hubf-grp-h{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-page);font-weight:600}
.hubf-grp-h span{font-family:var(--sans);letter-spacing:0;text-transform:none;font-weight:400;color:var(--on-page-soft);font-size:13px}
.hubf-grp .hubf-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 2px;font-size:15px}
.hubf-grp .hubf-n{margin-left:auto;font-size:13px;color:var(--on-page-soft)}
.hubf-yrs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hubf-yr-pill input{position:absolute;opacity:0;pointer-events:none}
.hubf-yr-pill span{height:44px;padding:0 16px;border-radius:999px;display:inline-grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);font-size:15px;cursor:pointer}
.hubf-yr-pill input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hubf-yr-pill input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.hubf-dlg-sel{margin-top:12px;height:44px;width:100%;border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);
  border-radius:6px;padding:0 12px;font-size:15px;background:var(--ground-field);color:var(--on-field)}
.hubf-dlg-f{display:flex;gap:12px;align-items:center;padding:14px 16px 22px;border-top:1px solid var(--rule-hair);background:var(--ground-page)}
.hubf-dlg-f .hubf-clearall{padding:0 6px;margin:0}
.hubf-dlg-go{flex:1;height:48px;border:0;border-radius:8px;background:var(--accent);color:var(--white);
  font:600 16px/1 var(--sans);cursor:pointer}
.hubf-dlg-go:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

@media (max-width:760px){
  .hubf-search{min-width:0;width:100%}
  .hubf-pw,.hubf-sortlbl{display:none}
  .hubf-pw:has(#lhb-pop-sort){display:block;flex:1}
  #lhb-pill-sort{width:100%;justify-content:center}
  .hubf-pill--filters{display:inline-flex;flex:1;justify-content:center}
  .hubf-sortwrap{margin-left:0;flex:1}
  .hubf-bar{row-gap:10px}
  .hubf-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .hubf-count2{margin-left:0;flex:none}
}