/* bwib-24 E2 - the club's reading pages: search, tags, categories, video library and watch page.
   Light design tokens (paper #FBF8F7, ink #1E1520, rose #E8437A with text-safe #C31851, gold #B8935A;
   Spectral and Jost). Everything is scoped under .hub and uses its own --h-* names, so it looks the same
   whether the page sits in the older chrome or in the light chrome, and it leaks into nothing else. */

/* The faces come from lane C's light design (css/light.css declares the same files, so loading both is harmless). */
@font-face{font-family:"Spectral";font-style:normal;font-weight:200;font-display:swap;src:url("/fonts/spectral-200.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/spectral-300.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jost-400.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jost-500.woff2") format("woff2")}

.hub {
  --h-paper: #FBF8F7;
  --h-white: #FFFFFF;
  --h-ink: #1E1520;
  --h-ink2: #5E5160;
  --h-line: rgba(30, 21, 32, .13);
  --h-line2: rgba(30, 21, 32, .07);
  --h-rose: #E8437A;
  --h-rose-ink: #C31851;
  --h-rose-deep: #A3123F;
  --h-gold: #B8935A;
  --h-blush: #F7EAED;
  --h-mist: #EFEAF3;
  --h-serif: var(--serif, 'Spectral', Georgia, 'Times New Roman', serif);
  --h-sans: var(--sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  --h-gut: clamp(16px, 4.6vw, 76px);
  background: var(--h-paper);
  color: var(--h-ink);
  font-family: var(--h-sans);
  font-size: 17px;
  line-height: 1.6;
  min-height: 60vh;
  -webkit-font-smoothing: antialiased;
}
.hub *, .hub *::before, .hub *::after { box-sizing: border-box; }
.hub [hidden] { display: none !important; }
.hub a { color: inherit; text-decoration: none; }
.hub img { display: block; max-width: 100%; }
.hub :where(h1, h2, h3) { margin: 0; font-family: var(--h-serif); font-weight: 200; letter-spacing: -.022em; line-height: 1.06; text-wrap: balance; color: var(--h-ink); }
.hub :where(p) { margin: 0; }
.hub ul { margin: 0; padding: 0; list-style: none; }
.hub a:focus-visible, .hub button:focus-visible, .hub input:focus-visible { outline: 2px solid var(--h-rose-ink); outline-offset: 3px; border-radius: 2px; }

.hub-wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--h-gut); }

/* ---- page head ---- */
.hub-head { padding: max(clamp(48px, 8vw, 112px), calc(var(--navh, 80px) + 28px)) 0 clamp(24px, 4vw, 44px); }
.hub-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--h-ink2); }
.hub-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--h-gold); flex-shrink: 0; }
.hub-title { margin-top: 18px; font-size: clamp(38px, 6.2vw, 88px); }
.hub-lead { max-width: 62ch; margin-top: 20px; font-size: clamp(16px, 1.35vw, 19px); color: var(--h-ink2); }
.hub-crumb { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--h-ink2); }
.hub-crumb:hover { color: var(--h-rose-ink); }

/* ---- chips ---- */
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hub-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--h-line); border-radius: 999px; background: var(--h-white); font-size: 14.5px; transition: border-color .2s, background-color .2s, color .2s; }
.hub-chip:hover { border-color: var(--h-rose-ink); color: var(--h-rose-ink); }
.hub-chip[aria-current="page"] { background: var(--h-ink); border-color: var(--h-ink); color: #fff; }
.hub-chip-n { font-size: 12.5px; color: var(--h-ink2); }
.hub-chip[aria-current="page"] .hub-chip-n { color: rgba(255, 255, 255, .78); }
.hub-chip--small { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* ---- body ---- */
.hub-body { padding: 0 0 clamp(56px, 9vw, 128px); }
.hub-h2 { margin: clamp(36px, 5vw, 64px) 0 22px; font-size: clamp(26px, 3vw, 40px); font-weight: 300; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.hub-h2:first-child { margin-top: 8px; }
.hub-h2-n { font-family: var(--h-sans); font-size: 14px; letter-spacing: .08em; font-weight: 400; color: var(--h-ink2); }
.hub-count { font-size: 14px; letter-spacing: .06em; color: var(--h-ink2); margin-bottom: 22px; }

/* ---- article cards ---- */
.hub-grid { display: grid; gap: clamp(28px, 3.4vw, 48px) clamp(16px, 2.4vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.hub-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hub-card-link { display: flex; flex-direction: column; gap: 14px; }
.hub-card-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: linear-gradient(135deg, var(--h-blush), var(--h-mist)); }
.hub-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .75, .1, 1); }
.hub-card-link:hover .hub-card-img img { transform: scale(1.035); }
.hub-card-img--blank::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid var(--h-gold); border-radius: 50%; opacity: .55; }
.hub-kicker { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--h-rose-ink); }
.hub-card-title { font-size: clamp(22px, 2vw, 29px); font-weight: 300; line-height: 1.14; }
.hub-card-link:hover .hub-card-title { color: var(--h-rose-ink); }
.hub-card-text { font-size: 15.5px; color: var(--h-ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13.5px; color: var(--h-ink2); }
.hub-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- topic tiles ---- */
.hub-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.hub-tile { display: flex; flex-direction: column; gap: 10px; min-height: 160px; padding: 26px; border: 1px solid var(--h-line); border-radius: 6px; background: var(--h-white); transition: border-color .25s, transform .35s cubic-bezier(.2, .75, .1, 1); }
.hub-tile:hover { border-color: var(--h-rose-ink); transform: translateY(-2px); }
.hub-tile-name { font-family: var(--h-serif); font-weight: 300; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.hub-tile-text { font-size: 15px; color: var(--h-ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hub-tile-n { margin-top: auto; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--h-rose-ink); }

/* ---- video cards ---- */
.hub-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--h-ink); }
.hub-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .75, .1, 1); }
.hub-card-link:hover .hub-thumb img { transform: scale(1.035); }
.hub-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: rgba(251, 248, 247, .94); box-shadow: 0 6px 24px rgba(30, 21, 32, .28); }
.hub-play::before { content: ""; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--h-rose-ink); }
.hub-badge { position: absolute; left: 12px; top: 12px; padding: 4px 11px; border-radius: 999px; background: var(--h-paper); color: var(--h-ink); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.hub-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--h-gold); vertical-align: 1px; }

/* ---- watch page ---- */
.hub-player { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 1120px; overflow: hidden; border-radius: 6px; background: var(--h-ink); }
.hub-player iframe, .hub-player-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hub-player-btn { display: block; cursor: pointer; padding: 0; }
.hub-player-btn img { width: 100%; height: 100%; object-fit: cover; }
.hub-player-btn .hub-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; transition: transform .3s cubic-bezier(.2, .75, .1, 1); }
.hub-player-btn .hub-play::before { border-width: 13px 0 13px 21px; margin-left: 5px; }
.hub-player-btn:hover .hub-play { transform: scale(1.08); }
.hub-player-note { margin-top: 12px; font-size: 13.5px; color: var(--h-ink2); }
.hub-watch-text { max-width: 70ch; margin-top: 28px; font-size: 17px; color: var(--h-ink2); white-space: pre-line; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hub-status { min-height: 1.5em; margin-top: 12px; font-size: 14px; color: var(--h-ink2); }

/* ---- buttons, search, pager, notes ---- */
.hub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--h-ink); background: transparent; color: var(--h-ink); font: 500 12.5px/1 var(--h-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.hub-btn:hover { background: var(--h-ink); color: #fff; }
.hub-btn--rose { background: var(--h-rose-ink); border-color: var(--h-rose-ink); color: #fff; }
.hub-btn--rose:hover { background: var(--h-rose-deep); border-color: var(--h-rose-deep); }
.hub-btn[aria-disabled="true"] { opacity: .38; pointer-events: none; }

.hub-search { display: flex; align-items: flex-end; gap: 14px; max-width: 760px; margin-top: 30px; }
.hub-search-field { flex: 1; min-width: 0; }
.hub-search-input { display: block; width: 100%; height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--h-ink); border-radius: 0; background: transparent; color: var(--h-ink); font: 300 clamp(20px, 2.4vw, 28px)/1.2 var(--h-serif); }
.hub-search-input::placeholder { color: var(--h-ink2); opacity: .8; }
.hub-search-input:focus { outline: none; border-bottom-color: var(--h-rose-ink); box-shadow: 0 1px 0 var(--h-rose-ink); }
.hub-search-label { display: block; margin-bottom: 4px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--h-ink2); }
.hub-search-hint { margin-top: 10px; font-size: 14px; color: var(--h-ink2); }

.hub-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: clamp(36px, 5vw, 68px); padding-top: 26px; border-top: 1px solid var(--h-line); }
.hub-pager-of { font-size: 14px; letter-spacing: .06em; color: var(--h-ink2); }

.hub-note { max-width: 640px; padding: 30px 28px; border: 1px solid var(--h-line); border-radius: 6px; background: var(--h-blush); }
.hub-note-title { font-family: var(--h-serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.hub-note p { margin-top: 10px; color: var(--h-ink2); }
.hub-note .hub-btn { margin-top: 20px; }

.hub-skel { display: block; border-radius: 6px; background: linear-gradient(100deg, var(--h-blush) 30%, #fff 50%, var(--h-blush) 70%); background-size: 220% 100%; animation: hub-shimmer 1.6s linear infinite; }
.hub-skel--card { aspect-ratio: 3 / 2; }
.hub-skel--line { height: 18px; margin-top: 14px; width: 80%; }
@keyframes hub-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.hub-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .hub-search { flex-direction: column; align-items: stretch; }
  .hub-search .hub-btn { width: 100%; }
  .hub-pager { justify-content: center; }
  .hub-pager-of { order: -1; width: 100%; text-align: center; }
  .hub-note { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::before, .hub *::after { transition: none !important; animation: none !important; }
  .hub-card-link:hover .hub-card-img img, .hub-card-link:hover .hub-thumb img, .hub-tile:hover { transform: none; }
}