/* ============================================================
   simuze-2026.css
   ------------------------------------------------------------
   Upgrade-only stylesheet. Loaded AFTER all existing theme CSS.
   Adds new layout pieces and overrides where the production
   pages need work (homepage, weblog, single, music).
   Existing classes are reused; new ones are namespaced sz-*.
   ============================================================ */


/* ── 0. Tokens that the existing :root might not have ─────── */
:root {
  --sz-cta-emphasis:        #3F6FA8;
  --sz-cta-emphasis-hover:  #5689C5;

  --sz-radius-tile: 10px;
  --sz-radius-card: 12px;
  --sz-section-pad-y: 56px;
  --sz-section-pad-y-mobile: 32px;

  /* Re-declare a couple of tokens so this file works standalone if
     the user wants to inspect it in isolation. They are the same
     values used elsewhere in the theme. */
  --sz-accent: #A8D5BA;
  --sz-accent-hover: #C1E2C8;
}


/* ── 1. Header — intentionally untouched (kept original theme styling) ─ */


/* ── 2. Buttons — vertical-centering fix + emphasis variant ─ */

.button,
.btn,
a.button,
a.btn {
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 42px;            /* === height for exact centering */
  height: 42px;
  min-height: 0;
  padding: 0 18px;
  white-space: nowrap;
}

.button-sm, .btn-sm, .button.button-sm, .btn.button-sm {
  height: 32px; line-height: 32px; padding: 0 12px; font-size: 13px;
}

/* Lock primary button text color — beats `a:link, a:visited { color: var(--color-accent) }` */
/* PRIMARY button (filled mint) — dark text */
.button,
.btn,
a.button:link, a.button:visited,
a.btn:link, a.btn:visited,
.hero-start-show:link, .hero-start-show:visited,
button.button, button.btn, input.button, input.btn {
  color: #0a0a0a !important;
  background: var(--sz-accent) !important;
  border: 1px solid var(--sz-accent) !important;
}
.button:hover, .btn:hover,
a.button:hover, a.btn:hover,
.hero-start-show:hover {
  color: #0a0a0a !important;
  background: var(--sz-accent-hover) !important;
  border-color: var(--sz-accent-hover) !important;
}
.button *, .btn * { color: inherit !important; }

/* OUTLINE button — white text on transparent */
.button.button-outline,
.button-outline,
.button-outline:link, .button-outline:visited,
a.button.button-outline:link, a.button.button-outline:visited {
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
}
.button.button-outline:hover,
.button-outline:hover,
a.button.button-outline:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* EMPHASIS button — sober blue, white text */
.button-emphasis, .btn-emphasis,
a.button-emphasis:link, a.button-emphasis:visited {
  background: var(--sz-cta-emphasis) !important;
  color: #fff !important;
  border-color: var(--sz-cta-emphasis) !important;
}
.button-emphasis:hover, .btn-emphasis:hover {
  background: var(--sz-cta-emphasis-hover) !important;
  border-color: var(--sz-cta-emphasis-hover) !important;
  color: #fff !important;
}

/* TICKETS / event light pill — white text on dark, mint on hover */
.event-ticket-btn-light:link,
.event-ticket-btn-light:visited {
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(184,186,193,0.22) !important;
}
.event-ticket-btn-light:hover {
  background: var(--sz-accent) !important;
  color: #0a0a0a !important;
  border-color: var(--sz-accent) !important;
}

/* Hero search button — same primary treatment */
.hero-search button,
.hero-home .hero-search button {
  color: #0a0a0a !important;
  background: var(--sz-accent) !important;
  border: none !important;
}
.hero-search button:hover { background: var(--sz-accent-hover) !important; }

.button-emphasis, .btn-emphasis {
  background: var(--sz-cta-emphasis) !important;
  color: #fff !important;
  border-color: var(--sz-cta-emphasis) !important;
}
.button-emphasis:hover, .btn-emphasis:hover {
  background: var(--sz-cta-emphasis-hover) !important;
  border-color: var(--sz-cta-emphasis-hover) !important;
  color: #fff !important;
}

.button-pill, .btn-pill { border-radius: 999px !important; padding-left: 22px; padding-right: 22px; }


/* ── 3. Section heads ────────────────────────────────────── */
.sz-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
  flex-wrap: wrap;
}
.sz-section-head__eyebrow {
  font-family: 'Rules', 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sz-accent);
  margin: 0 0 6px;
}
.sz-section-head__title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}
.sz-section-head__link {
  font-size: 14px; color: rgba(255,255,255,0.7);
  text-decoration: none; white-space: nowrap;
}
.sz-section-head__link:hover { color: var(--sz-accent); }


/* ── 4. Hero — homepage ──────────────────────────────────── */
/* The existing .hero-home is fine; we tighten layout, add a right
   column "Right now" panel, and make the search subtle. */

.hero-home .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
}
@media (max-width: 900px) {
  .hero-home .hero-inner { grid-template-columns: 1fr; gap: 32px; }
}

.hero-home h1 {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.hero-home .hero-lede {
  font-size: 18px;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 0 24px;
}

.hero-home .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.hero-home .hero-tagline { color: rgba(255,255,255,0.6); font-style: italic; font-size: 0.9rem; }

/* Search — sits a bit lower, wider, more prominent without being a full band */
.hero-home .hero-search {
  display: flex; gap: 10px; align-items: stretch;
  max-width: 720px;
  margin-top: 70px;
}
.hero-home .hero-search input[type="search"] {
  flex: 1; min-width: 0;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(8,9,12,0.65);
  color: #fff; font: inherit; outline: none;
  font-size: 15px;
  transition: border-color .2s ease, background .2s ease;
}
.hero-home .hero-search input::placeholder { color: rgba(255,255,255,0.5); }
.hero-home .hero-search input:focus {
  border-color: var(--sz-accent);
  background: rgba(8,9,12,0.88);
  box-shadow: 0 0 0 3px rgba(168,213,186,0.15);
}
.hero-home .hero-search button {
  height: 48px; padding: 0 26px;
  border-radius: 999px;
  font-weight: 600; font-size: 15px; cursor: pointer;
  white-space: nowrap;
}

/* Right column: live "Right now" panel */
.sz-rightnow {
  background: rgba(11,12,15,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 24px 26px 26px;
  backdrop-filter: blur(6px);
}
.sz-rightnow__head,
.hero-home .sz-rightnow__head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Rules', sans-serif;
  font-size: 10px !important; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1;
  color: var(--sz-accent);
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sz-rightnow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sz-accent);
  box-shadow: 0 0 0 0 rgba(168,213,186,0.5);
  animation: sz-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes sz-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(168,213,186,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(168,213,186,0);   }
  100% { box-shadow: 0 0 0 0   rgba(168,213,186,0);   }
}
.sz-rightnow__list { display: flex; flex-direction: column; gap: 12px; }
.sz-rightnow__row {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sz-rightnow__row:last-child { border-bottom: none; padding-bottom: 0; }
.sz-rightnow__num {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 28px; line-height: 1;
  color: #fff; flex-shrink: 0; min-width: 48px;
}
.sz-rightnow__num--accent { color: var(--sz-accent); }
.sz-rightnow__label { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.35; }


/* ── 5. Board list — emphasised on homepage ──────────────── */
/* The existing .board-list / .board-item styles are good. We just
   bump padding on the homepage board so it feels more prominent. */
#hp-board .board-list { gap: 8px; }
#hp-board .board-item { padding: 14px 16px; border-radius: 10px; }
#hp-board .board-title { font-size: 15px; }
#hp-board .board-meta  { font-size: 12px; }


/* ── 6. Event list — whole row hover, ticket is its own link */
#hp-upcoming .event-list { padding: 0; }
#hp-upcoming .event-list-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; margin: 0 -14px;
  border-radius: 10px;
  border-bottom: 1px solid rgba(184,186,193,0.10);
  transition: background .15s ease;
}
#hp-upcoming .event-list-item:hover { background: rgba(255,255,255,0.04); }
#hp-upcoming .event-list-item:last-child { border-bottom: none; }
#hp-upcoming .event-row-main {
  display: flex; align-items: center; gap: 14px;
  flex: 1; min-width: 0; text-decoration: none; color: inherit; cursor: pointer;
}
#hp-upcoming .event-date-badge {
  min-width: 52px; padding: 6px 6px;
  font-family: 'Rules', sans-serif; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 8px;
}
#hp-upcoming .event-date-badge .day {
  font-family: 'Inter Tight', sans-serif; font-size: 22px; letter-spacing: 0;
}
#hp-upcoming .event-title { font-size: 15px; }
#hp-upcoming .event-meta  { font-size: 12px; margin-top: 2px; }
#hp-upcoming .event-ticket-btn-light {
  padding: 7px 14px; font-size: 12px; margin-left: auto; flex-shrink: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#hp-upcoming .event-ticket-btn-light:hover {
  background: var(--sz-accent); border-color: var(--sz-accent); color: #0a0a0a;
}


/* ── 7. Feature release (homepage / music) ──────────────── */
.sz-home-featured-row { align-items: flex-start; }
.sz-home-featured-row__side .sz-section-head__title { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.sz-playlist-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sz-playlist-list li a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.sz-playlist-list li a:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(168,213,186,0.4);
}
.sz-playlist-list__name { font-weight: 600; font-size: 0.95rem; }
.sz-playlist-list__meta { font-size: 0.82rem; color: rgba(255,255,255,0.55); }

.sz-feature-release {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px;
  align-items: start;
}
.sz-home-featured-row__main .sz-feature-release {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 28px;
}
.sz-home-featured-row__main .sz-feature-release__art {
  width: 100%; max-width: 220px; height: auto; aspect-ratio: 1 / 1;
}
@media (max-width: 1100px) {
  .sz-home-featured-row__main .sz-feature-release { grid-template-columns: 1fr; }
  .sz-home-featured-row__main .sz-feature-release__art { max-width: 280px; }
}
@media (max-width: 900px) {
  .sz-home-featured-row .col-8,
  .sz-home-featured-row .col-4 { flex: 0 0 100%; max-width: 100%; }
  .sz-feature-release { grid-template-columns: 1fr; gap: 24px; }
}
.sz-feature-release__art {
  width: 320px; height: 320px;
  border-radius: 12px; overflow: hidden;
  background:
    url('../images/favicon_simuze_white.svg') center/35% no-repeat,
    linear-gradient(135deg, #1a1f2e 0%, #2a3042 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.sz-feature-release__body { display: flex; flex-direction: column; }
.sz-feature-release__eyebrow {
  font-family: 'Rules', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sz-accent); margin: 0 0 12px;
}
.sz-feature-release__title {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08;
  letter-spacing: -0.015em; margin: 0 0 6px;
}
.sz-feature-release__artist {
  font-size: 18px; color: rgba(255,255,255,0.7); margin: 0 0 18px;
}
.sz-feature-release__about {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82);
  margin: 0 0 22px; max-width: 540px;
}
.sz-feature-release__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.sz-tracklist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  max-width: 540px;
}
.sz-tracklist li {
  display: grid; grid-template-columns: 24px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 6px;
  font-size: 14px;
  transition: background .15s ease;
}
.sz-tracklist li:hover { background: rgba(255,255,255,0.04); }
.sz-tracklist .num  { color: rgba(255,255,255,0.45); font-family: ui-monospace, monospace; font-size: 12px; }
.sz-tracklist .name { color: #fff; }
.sz-tracklist .dur  { color: rgba(255,255,255,0.5); font-family: ui-monospace, monospace; font-size: 12px; }

/* Playable variant — homepage / music Featured release only */
#sz-fr-playalbum { font-family: inherit; }

.sz-tracklist--playable li {
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease;
}
.sz-tracklist--playable li:hover { background: rgba(255,255,255,0.06); }

.sz-tracklist--playable .sz-fr-track__lead {
  position: relative;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .15s ease;
}
.sz-tracklist--playable .sz-fr-track__lead .num { transition: opacity .12s ease; }
.sz-tracklist--playable .sz-fr-track__icon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 10px; color: var(--sz-accent);
  opacity: 0; transition: opacity .12s ease;
}

/* Hover (not playing): reveal accent play triangle over the number */
.sz-tracklist--playable li:hover .num { opacity: 0; }
.sz-tracklist--playable li:hover .sz-fr-track__icon { opacity: 1; }

/* Active track: filled accent disc + dark icon + accent title + row tint */
.sz-tracklist--playable li.is-active { background: rgba(168, 213, 186, 0.10); }
.sz-tracklist--playable li.is-active .num { opacity: 0; }
.sz-tracklist--playable li.is-active .sz-fr-track__lead { background: var(--sz-accent); }
.sz-tracklist--playable li.is-active .sz-fr-track__icon { color: #0a0a0a; opacity: 1; }
.sz-tracklist--playable li.is-active .name { color: var(--sz-accent); font-weight: 600; }
.sz-tracklist--playable li.is-active .dur { color: var(--sz-accent); }


/* ── Regular player (album / track / community / playlist) ─────────────────
   Show the track number by default; reveal the (existing green) play button on
   hover and while playing. Push the action icons flush to the right edge.
   Scoped to .simuze-audio-player so the edit/management .upload-row lists are
   untouched. .active-track is added by simuze-player.js on the playing row. */
/* Overlay number + play button in one grid cell. Grid (not position:relative)
   so the absolute .drag-handle stays positioned against the row's left edge. */
.simuze-audio-player .upload-play-col { display: grid; place-items: center; }
.simuze-audio-player .upload-play-col > .upload-num,
.simuze-audio-player .upload-play-col > .play-btn-list { grid-area: 1 / 1; }
.simuze-audio-player .upload-num {
  font-family: ui-monospace, monospace; font-size: 12px;
  color: var(--color-text-subtle);
  pointer-events: none;
  transition: opacity .12s ease;
}
.simuze-audio-player .play-btn-list { opacity: 0; transition: opacity .12s ease; }
.simuze-audio-player .upload-row:hover .upload-num,
.simuze-audio-player .upload-row.active-track .upload-num { opacity: 0; }
.simuze-audio-player .upload-row:hover .play-btn-list,
.simuze-audio-player .upload-row.active-track .play-btn-list { opacity: 1; }

/* Action icons flush right: the 1fr info column shoves the rest to the edge */
.simuze-audio-player .upload-row {
  grid-template-columns: 40px 1fr auto;
  padding-right: 8px;
}
.simuze-audio-player .upload-actions-col { justify-self: end; }

/* Drag handle: hidden by default, revealed only while pressing/dragging the row. */
.simuze-audio-player .upload-row .drag-handle {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.simuze-audio-player .upload-row:active .drag-handle,
.simuze-audio-player .upload-row.dragging .drag-handle {
  opacity: 1;
}

/* Playlist: album name same size as the track title (was inheriting ~16px base) */
.track-album-link,
.track-album-link a { font-size: 14px; }

/* Playlist overview: the list has no right-column content, so let it span the
   full .dashboard-content width (override the shared 1fr/300px dashboard grid). */
.playlists-page-full .dashboard-content { grid-template-columns: 1fr; }

.sz-play-btn,
a.sz-play-btn:link,
a.sz-play-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  background: var(--sz-accent) !important; color: #0a0a0a !important;
  border: none; border-radius: 999px; font-weight: 600;
  font-size: 15px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.sz-play-btn:hover,
a.sz-play-btn:hover { background: var(--sz-accent-hover) !important; color: #0a0a0a !important; }
.sz-play-btn i, a.sz-play-btn i { font-size: 12px; color: inherit !important; }


/* ── 8. Album card action row (existing .album-card .album-actions) */
/* The existing icon-small system is fine; we tighten sizing for the
   200px album card and ensure FontAwesome icons render cleanly. */
.albums-grid .album-card { width: 100%; }

/* Album cover MUST always be square — overrides legacy fixed 200x200 in layout.css */
.album-card .album-artwork {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}
.album-card .album-artwork img,
.album-card .album-cover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.album-card .album-artwork .album-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* .albums-grid .album-card .album-actions: do NOT override here.
   The bottom-aligned action bar (position: absolute; bottom: 0 + padding,
   background, border-top, border-radius) is fully defined in
   components.css:1306-1327. Adding overrides here breaks that layout. */
.albums-grid .album-card .album-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px;
  min-height: 0;
}
.albums-grid .album-card .icon-small {
  width: 30px !important; height: 30px !important;
  padding: 0 !important;
  border-radius: 5px !important;
}
.albums-grid .album-card .icon-small i { font-size: 11px !important; line-height: 1 !important; }


/* ── 9. Latest added albums strip — SUBTLE ───────────────
   No card chrome. Just artwork (squared) + title + artist + a row
   of small icon buttons. Whole card is flat against the page bg.
   Matches the inspiration: clean cover, plain text, faint icons. */
.sz-album-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 32px 24px;
}

/* Nuke the album card frame on the subtle strip — no bg, no border,
   no rounded card around the whole thing. Just the artwork is rounded. */
.sz-album-strip .album-card,
.albums-grid.sz-album-strip .album-card,
.albums-grid.sz-album-strip .album-card:focus,
.albums-grid.sz-album-strip .album-card:active {
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 10px !important;
  margin: -10px !important;        /* compensate so layout stays flush */
  outline: none !important;
  transition: background .2s ease !important;
}
.sz-album-strip .album-card:hover {
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Artwork is the only square thing here — kill the inherited green
   gradient from the upload-overview rule, give the placeholder a
   plain neutral dark background. Force square via aspect-ratio AND
   override the legacy fixed 200x200 from layout.css. */
.sz-album-strip .album-card .album-artwork,
.albums-grid.sz-album-strip .album-card .album-artwork {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  background: #1a1f2e !important;
  border-radius: 10px !important;
  position: relative;
  overflow: hidden;
  display: block !important;
}
.sz-album-strip .album-card .album-artwork img,
.albums-grid.sz-album-strip .album-card .album-artwork img,
.sz-album-strip .album-card .album-cover,
.albums-grid.sz-album-strip .album-card .album-cover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.sz-album-strip .album-card .album-placeholder {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  background:
    url('../images/favicon_simuze_white.svg') center/32% no-repeat,
    #1a1f2e !important;
  opacity: 0.9;
}
.sz-album-strip .album-card .album-cover {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Cover hover: very gentle scale, no card lift */
.sz-album-strip .album-card .album-link:hover .album-cover,
.sz-album-strip .album-card:hover .album-artwork {
  transform: none !important;
}

/* Info block — plain text under the artwork */
.sz-album-strip .album-card .album-info,
.albums-grid.sz-album-strip .album-card .album-info {
  padding: 14px 0 0 !important;
  background: transparent !important;
}
.sz-album-strip .album-card .album-title,
.albums-grid.sz-album-strip .album-card .album-title {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}
.sz-album-strip .album-card .album-artist,
.albums-grid.sz-album-strip .album-card .album-artist {
  font-size: 14px !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* Action row — small, no fixed bottom bar, just a flex row */
.sz-album-strip .album-card .album-actions,
.albums-grid.sz-album-strip .album-card .album-actions {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
}
.sz-album-strip .album-card .icon-small,
.albums-grid.sz-album-strip .album-card .icon-small {
  width: 32px !important; height: 32px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sz-album-strip .album-card .icon-small i {
  font-size: 12px !important;
  color: inherit !important;
  opacity: 1 !important;
}
.sz-album-strip .album-card .icon-small:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
.sz-album-strip .album-card .icon-small:hover i { color: #fff !important; }
.sz-album-strip .album-card .icon-small.is-on,
.sz-album-strip .album-card .icon-small.is-on i {
  color: var(--sz-accent) !important;
  border-color: rgba(168,213,186,0.4) !important;
}


/* ── 10. Group activity panel + sidebar ─────────────────── */
.sz-panel {
  background: rgba(17,19,24,0.6);
  border: 1px solid rgba(184,186,193,0.18);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.sz-panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.sz-panel__head h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 600;
  font-size: 1rem; margin: 0; padding: 0;
}
.sz-panel__head a {
  font-size: 12px; color: rgba(255,255,255,0.6);
  text-decoration: none; cursor: pointer;
}
.sz-panel__empty {
  font-size: 13px; color: rgba(255,255,255,0.55);
  margin: 0 0 14px;
}
.sz-panel__body {
  font-size: 13px; color: rgba(255,255,255,0.7);
  line-height: 1.5; margin: 0 0 14px;
}
.sz-panel .button { width: 100%; }


/* ── 11. Group tile (homepage Latest groups, network strips) */
.sz-group-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--color-text, #fff);
}
.sz-group-tile__thumb {
  width: 100%; aspect-ratio: 1/1; border-radius: var(--sz-radius-tile);
  background:
    url('../images/favicon_simuze_white.svg') center/40% no-repeat,
    linear-gradient(135deg, #1a1f2e 0%, #2a3042 100%);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .25s ease, border-color .25s ease;
}
.sz-group-tile:hover .sz-group-tile__thumb {
  transform: translateY(-2px);
  border-color: rgba(168,213,186,0.4);
}
.sz-group-tile__thumb--map {
  background: url('../images/hero-worldmap-bg.jpg') center/cover no-repeat;
  filter: saturate(0.8) brightness(0.85);
}
.sz-group-tile__thumb--flag {
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,19,24,0.8);
  font-size: 44px;
}
.sz-group-tile__name { font-size: 14px; font-weight: 500; text-align: center; }
.sz-group-tile__type {
  font-family: 'Rules', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: -4px;
}

.sz-group-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px 16px;
}


/* ── 12. Weblog teaser (homepage) ───────────────────────── */
.sz-weblog-teaser {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .sz-weblog-teaser { grid-template-columns: 1fr; gap: 28px; } }

/* Featured post: no box, no border — just media + body laid flush so it lines up
   with the section title above and the 4-item list on the right. */
.sz-weblog-teaser__hero {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px;
  padding: 14px;
  margin: -14px;
  border-radius: 12px;
  background: transparent;
  border: none;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background .15s ease;
}
@media (max-width: 640px) { .sz-weblog-teaser__hero { grid-template-columns: 1fr; } }
.sz-weblog-teaser__hero:hover {
  background: rgba(255,255,255,0.04);
  transform: none;
}
.sz-weblog-teaser__hero-media {
  width: 320px; height: 320px;
  border-radius: 10px;
  background-size: cover; background-position: center;
}
@media (max-width: 640px) {
  .sz-weblog-teaser__hero-media { width: 100%; height: auto; aspect-ratio: 1/1; }
}
.sz-weblog-teaser__hero-body {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.sz-weblog-teaser__hero-meta {
  font-size: 11px; color: rgba(255,255,255,0.55);
  font-family: 'Rules', sans-serif; letter-spacing: 0.10em; text-transform: uppercase;
}
.sz-weblog-teaser__hero-title {
  font-family: 'Inter Tight', sans-serif; font-weight: 600;
  font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.15;
  margin: 0; color: #fff;
}
.sz-weblog-teaser__hero-excerpt {
  font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}

.sz-weblog-teaser__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 320px;
}
.sz-weblog-teaser__list li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.sz-weblog-teaser__list li:last-child { border-bottom: none; }
.sz-weblog-teaser__list a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  margin: 0 -14px;
  border-radius: 8px;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background .15s ease;
}
.sz-weblog-teaser__list a:hover { background: rgba(255,255,255,0.04); }
.sz-weblog-teaser__list-meta {
  font-size: 11px; color: rgba(255,255,255,0.45);
  font-family: 'Rules', sans-serif; letter-spacing: 0.10em; text-transform: uppercase;
}
.sz-weblog-teaser__list-title {
  font-family: 'Inter Tight', sans-serif; font-weight: 500;
  font-size: 16px; line-height: 1.3; margin: 0;
  transition: color .15s ease;
}


/* ── 13. Weblog index — magazine layout ─────────────────── */.sz-weblog-featured {
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.4);
  margin-bottom: 48px;
}
@media (max-width: 900px) { .sz-weblog-featured { grid-template-columns: 1fr; } }
.sz-weblog-featured__media {
  position: relative; min-height: 360px;
  background-size: cover; background-position: center;
}
.sz-weblog-featured__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}
.sz-weblog-featured__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 44px;
}
.sz-weblog-featured__eyebrow {
  font-family: 'Rules', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sz-accent); margin: 0 0 14px;
}
.sz-weblog-featured__title {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: #fff;
}
.sz-weblog-featured__excerpt {
  font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 22px;
}
.sz-weblog-featured__meta {
  font-size: 13px; color: rgba(255,255,255,0.6);
  display: flex; gap: 14px;
}
.sz-weblog-featured__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.3); align-self: center; }

.sz-weblog-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.sz-weblog-card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
  text-decoration: none; color: inherit;
}
.sz-weblog-card:hover { transform: translateY(-2px); border-color: rgba(168,213,186,0.30); }
.sz-weblog-card__media { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.sz-weblog-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sz-weblog-card__meta { font-size: 12px; color: rgba(255,255,255,0.55); }
.sz-weblog-card__title {
  font-family: 'Inter Tight', sans-serif; font-weight: 600;
  font-size: 1.25rem; line-height: 1.25; margin: 0; color: #fff;
}
.sz-weblog-card__excerpt { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; margin: 0; }
.sz-weblog-card__terms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.sz-weblog-card__term {
  font-family: 'Rules', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(168,213,186,0.12); color: var(--sz-accent);
  text-decoration: none;
}
.sz-weblog-card__term--tag { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }


/* ── 14. Single post — editorial header + body + related ─ */
.sz-single-hero {
  position: relative; padding: 120px 32px 56px;
  overflow: hidden; min-height: 420px;
  display: flex; align-items: flex-end;
}
.sz-single-hero__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0;
}
.sz-single-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,15,0.4) 0%, rgba(11,12,15,0.95) 100%);
}
.sz-single-hero__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 900px; margin: 0 auto;
}
.sz-single-hero__crumb {
  font-size: 13px; color: rgba(255,255,255,0.7);
  display: flex; gap: 8px; align-items: center;
  margin: 0 0 18px;
}
.sz-single-hero__crumb a {
  color: var(--sz-accent); text-decoration: none;
}
.sz-single-hero__title {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 16px; color: #fff;
}
.sz-single-hero__meta {
  font-size: 14px; color: rgba(255,255,255,0.78);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.sz-single-hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.3); }

.sz-single-body {
  max-width: 720px; margin: 0 auto; padding: 56px 32px 32px;
}
.sz-related-strip { max-width: var(--container-max-width); margin: 0 auto; padding: 32px var(--space-32) 64px; }

@media (max-width: 768px) {
  .sz-single-hero { padding: 80px 16px 40px; min-height: 0; }
  .sz-single-body { padding: 32px 16px 24px; }
  .sz-related-strip { padding: 24px 16px 40px; }
}


/* ── 15. Music page — featured + grids ──────────────────── */
/* Hero container: per-post hero image is injected via inline background-image.
   The dark gradient overlay sits in ::before so it composes over any image. */
.sz-music-hero {
  padding: 120px 0 72px;
  min-height: 520px;
  display: flex; align-items: center;
  position: relative;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sz-music-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,15,0.55) 0%, rgba(11,12,15,0.92) 100%);
  pointer-events: none;
}

/* Default S-logo placeholder when no hero image is set (also usable on any
   image-style hero element, e.g. .header-image). Black background with the
   Simuze S centered at 20% opacity. */
.sz-hero-bg--default {
  background-color: #000 !important;
  background-image: none !important;
  position: relative;
}
.sz-hero-bg--default::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/logo-simuze-white.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 140px auto;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.sz-music-hero.sz-hero-bg--default::before { background: none; }

.sz-music-hero__inner {
  width: 100%;
  max-width: var(--container-max-width); margin: 0 auto;
  padding: 0 var(--space-32);
  position: relative;
  z-index: 1;
}
.sz-music-hero h1 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.sz-music-hero p {
  font-size: 17px; color: rgba(255,255,255,0.78);
  margin: 0 0 28px; max-width: 620px; line-height: 1.5;
}

/* Pill-search inside music hero is slightly heavier than the default sz-search-bar */
.sz-music-hero .sz-search-bar { max-width: 720px; margin-bottom: 6px; }
.sz-music-hero .sz-search-bar input[type="search"] { height: 48px; font-size: 15px; }
.sz-music-hero .sz-search-bar__filter-btn,
.sz-music-hero .sz-search-bar__submit { height: 48px; }

/* Genre pill row — match production/music.html (round outline button-sm pills) */
.sz-genre-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.sz-genre-pills .button.button-outline.button-sm,
.sz-genre-pills a.button.button-outline.button-sm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 1 !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}
.sz-genre-pills .button.button-sm.is-active,
.sz-genre-pills a.button.button-sm.is-active {
  background: var(--sz-accent) !important;
  color: #0a0a0a !important;
  border-color: var(--sz-accent) !important;
}

/* Filter panel inside music hero — above genre pills */
.sz-music-hero .music-filter-slidedown.sz-filter-panel {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 10px;
}
.sz-music-hero .music-filter-slidedown.sz-filter-panel.is-open {
  max-height: 580px;
  padding: 0;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .sz-music-hero { padding: 56px 0 32px; min-height: 0; }
  .sz-music-hero__inner { padding: 0 16px; }
  .sz-music-hero p { margin-bottom: 20px; }
  .sz-music-hero .sz-search-bar { flex-wrap: wrap; }
  .sz-music-hero .sz-search-bar input[type="search"] { flex: 1 1 100%; }
  .sz-music-hero .sz-search-bar__filter-btn { flex: 1; }
  .sz-music-hero .sz-search-bar__submit { flex: 1; }
}

/* ── 16. Section dividers between homepage blocks ──────── */
.sz-section-divider {
  border-top: 1px solid rgba(255,255,255,0.05);
  margin: 0;
}


/* ── 17. Mobile hamburger fixes (override existing menu.css if needed) */
@media (max-width: 1024px) {
  /* Hide login button text on tablet, keep icon */
  /* (leave existing responsive.css to handle this) */
}

@media (max-width: 768px) {
  /* Section padding tightens on mobile */
  .fullwidth { padding-left: 0 !important; padding-right: 0 !important; }
  .fullwidth > .row { padding-left: 16px; padding-right: 16px; }

  /* Homepage hero columns stack and the rightnow shrinks */
  .hero-home .hero-actions { gap: 8px; }
  .hero-home .hero-search { max-width: 100%; }
  .hero-home .hero-search button { padding: 0 14px; }
  .sz-rightnow { padding: 18px; border-radius: 12px; }
  .sz-rightnow__num { font-size: 22px; min-width: 40px; }
  .sz-rightnow__label { font-size: 13px; }

  /* Featured release stacks; artwork centres */
  .sz-feature-release__art { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1/1; margin: 0 auto; }
  .sz-feature-release__title { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* Group tiles shrink */
  .sz-group-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px 10px; }
  .sz-group-tile__name { font-size: 13px; }

  /* Album icon row stays at 5 cols on phones; keep min 5x30 = 150px */
  .albums-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 16px !important; }

  /* Section heads stack the link below */
  .sz-section-head { gap: 8px; margin-bottom: 18px; }
  .sz-section-head__title { font-size: 1.4rem; }
}


/* ── 18. Tiny phones ──────────────────────────────────── */
@media (max-width: 380px) {
  .hero-home h1 { font-size: 2rem; }
  .hero-home .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-home .hero-actions .button { width: 100%; }
  .sz-rightnow__row { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 10px; }
  .albums-grid { grid-template-columns: 1fr 1fr !important; }
}


/* ============================================================
   19. NETWORK page — map hero + type strips + board column
   ============================================================ */

.sz-network-map {
  position: relative;
  height: 540px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.sz-network-map #network-map { position: absolute; inset: 0; z-index: 1; }
.sz-network-map .leaflet-container {
  background: #0a0a0a;
  font-family: 'IBM Plex Sans', sans-serif;
}
.sz-network-map .leaflet-control-attribution {
  background: rgba(11,12,15,0.7);
  color: rgba(255,255,255,0.5);
  font-size: 10px; border-radius: 4px;
}
.sz-network-map .leaflet-control-attribution a { color: var(--sz-accent); }

/* Custom zoom + / - top-right */
.sz-network-map .leaflet-control-zoom {
  margin: 16px 16px 0 0 !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.sz-network-map .leaflet-control-zoom a {
  background: rgba(11,12,15,0.92) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  width: 36px !important; height: 36px !important;
  line-height: 36px !important;
  font-size: 18px; font-weight: 400;
  text-decoration: none;
}
.sz-network-map .leaflet-control-zoom a:first-child { border-bottom: none !important; border-radius: 8px 8px 0 0 !important; }
.sz-network-map .leaflet-control-zoom a:last-child  { border-radius: 0 0 8px 8px !important; }
.sz-network-map .leaflet-control-zoom a:hover { background: rgba(168,213,186,0.18) !important; color: var(--sz-accent) !important; }

/* Title overlay at the bottom of the map */
.sz-network-map__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(11,12,15,0) 0%, rgba(11,12,15,0.82) 65%, rgba(11,12,15,0.95) 100%);
  pointer-events: none;
}
.sz-network-map__inner {
  max-width: var(--container-max-width); margin: 0 auto;
  padding: 64px var(--space-32) 28px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  pointer-events: auto;
}
.sz-network-map__title {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.0; letter-spacing: -0.02em;
  margin: 0;
}
.sz-network-map__subtitle {
  font-size: 15px; color: rgba(255,255,255,0.75);
  margin: 10px 0 0; max-width: 540px; line-height: 1.5;
}

.simuze-marker {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sz-accent);
  border: 2px solid #0B0C0F;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.5);
}
.simuze-marker.is-venue    { background: #E2C28A; }
.simuze-marker.is-label    { background: #8FB6E0; }
.simuze-marker.is-artist   { background: #DDA0A0; }
.simuze-marker.is-festival { background: #C3B6E8; }

/* Search + filter bar */
.sz-search-bar {
  display: flex; gap: 10px; align-items: stretch;
  margin-bottom: 28px;
}
.sz-search-bar input[type="search"] {
  flex: 1; height: 44px; padding: 0 22px;
  border-radius: 999px;
  background: rgba(17,19,24,0.6);
  border: 1px solid rgba(184,186,193,0.20);
  color: #fff; font: inherit; font-size: 14px; outline: none;
}
.sz-search-bar input::placeholder { color: rgba(255,255,255,0.4); }
.sz-search-bar input:focus { border-color: var(--sz-accent); background: rgba(17,19,24,0.85); }
.sz-search-bar__filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 999px;
  background: rgba(17,19,24,0.6);
  border: 1px solid rgba(184,186,193,0.20);
  color: #fff !important; font: inherit; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.sz-search-bar__filter-btn:hover { background: rgba(17,19,24,0.9); border-color: rgba(255,255,255,0.3); }
.sz-search-bar__filter-btn[aria-expanded="true"] {
  background: rgba(168,213,186,0.12);
  border-color: rgba(168,213,186,0.4);
  color: var(--sz-accent) !important;
}
.sz-search-bar__submit {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 26px;
  border-radius: 999px; border: none;
  background: var(--sz-accent); color: #0a0a0a;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.sz-search-bar__submit:hover { background: var(--sz-accent-hover); }

/* Collapsible filter panel */
.sz-filter-panel {
  background: rgba(13,14,18,0.7);
  border: 1px solid rgba(184,186,193,0.16);
  border-radius: 14px;
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: max-height .35s ease, padding .25s ease, margin-bottom .25s ease;
}
.sz-filter-panel.is-open {
  max-height: 800px;
  padding: 24px;
  margin-bottom: 32px;
}
.sz-filter-panel__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 24px;
}
.sz-filter-panel__group h4 {
  font-family: 'Rules', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: rgba(255,255,255,0.55); margin: 0 0 12px;
}
.sz-filter-panel__group .checks {
  display: flex; flex-direction: column; gap: 8px;
}
.sz-filter-panel__group label {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: #fff; cursor: pointer;
}
.sz-filter-panel__group input[type="checkbox"] { accent-color: var(--sz-accent); }
.sz-filter-panel__group select {
  width: 100%; height: 38px; padding: 0 12px;
  border-radius: 6px;
  background: rgba(11,12,15,0.6); color: #fff;
  border: 1px solid rgba(184,186,193,0.20);
  font: inherit; font-size: 14px; line-height: 38px;
  outline: none;
}
.sz-filter-panel__group select:focus { border-color: var(--sz-accent); }
.sz-filter-panel__actions {
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sz-filter-panel__actions a {
  font-size: 13px; color: rgba(255,255,255,0.65);
  text-decoration: none; align-self: center;
}
.sz-filter-panel__actions a:hover { color: var(--sz-accent); }

/* Two-column body: main + sidebar */
.sz-network-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px; align-items: start;
}
@media (max-width: 900px) {
  .sz-network-body { grid-template-columns: 1fr; }
}

/* Type strip — section per group type */
.sz-type-strip { margin-bottom: 44px; }
.sz-type-strip__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px; gap: 16px;
}
.sz-type-strip__title {
  font-family: 'Inter Tight', sans-serif; font-weight: 600;
  font-size: 1.4rem; margin: 0; padding: 0;
  letter-spacing: -0.01em;
}
.sz-type-strip__count {
  font-family: ui-monospace, monospace; font-size: 12px;
  color: rgba(255,255,255,0.4); margin-left: 8px; font-weight: 400;
}
.sz-type-strip__link {
  font-size: 13px; color: rgba(255,255,255,0.65);
  text-decoration: none; white-space: nowrap;
}
.sz-type-strip__link:hover { color: var(--sz-accent); }

/* Right sidebar panels (board activity etc.) */
.sz-side-panel {
  background: rgba(17,19,24,0.6);
  border: 1px solid rgba(184,186,193,0.16);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.sz-side-panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sz-side-panel__head h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 600;
  font-size: 1rem; margin: 0; padding: 0;
}
.sz-side-panel__head a {
  font-size: 12px; color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.sz-side-panel__head a:hover { color: var(--sz-accent); }
.sz-side-panel__empty {
  font-size: 13px; color: rgba(255,255,255,0.5);
  margin: 0 0 14px; line-height: 1.5;
}
.sz-side-panel .board-list { gap: 6px; }
.sz-side-panel .board-item { padding: 10px 12px; }
.sz-side-panel .board-title { font-size: 13px; }
.sz-side-panel .board-meta  { font-size: 11px; }
.sz-side-panel .button { width: 100%; }


/* ============================================================
   20. LIVE page — event list + filter sidebar
   ============================================================ */

.sz-live-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}
/* Make the aside itself sticky — works regardless of its own content height
   because the parent grid container scrolls past. */
.sz-live-layout > aside {
  position: sticky;
  top: 84px;
  align-self: start;
}
@media (max-width: 900px) {
  .sz-live-layout { grid-template-columns: 1fr; }
  .sz-live-layout > aside { position: static; top: auto; }
}

.sz-live-events {
  /* a slightly more emphasised event list than the homepage version */
}
.sz-live-events .event-list-item {
  padding: 16px 18px; margin: 0 -18px;
  border-radius: 10px;
}
.sz-live-events .event-row-main { gap: 16px; }
.sz-live-events .event-date-badge { min-width: 56px; padding: 8px 6px; }
.sz-live-events .event-date-badge .day { font-size: 24px; }
.sz-live-events .event-title { font-size: 16px; }
.sz-live-events .event-meta  { font-size: 13px; }

.sz-live-filters {
  position: sticky; top: 84px;
  background: rgba(17,19,24,0.6);
  border: 1px solid rgba(184,186,193,0.18);
  border-radius: 14px;
  padding: 22px 22px 16px;
}
.sz-live-filters__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sz-live-filters__head h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 600;
  font-size: 1.05rem; margin: 0; padding: 0;
}
.sz-live-filters__head a {
  font-size: 12px; color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.sz-live-filter-group { margin-bottom: 18px; }
.sz-live-filter-group h4 {
  font-family: 'Rules', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: rgba(255,255,255,0.55); margin: 0 0 10px;
}
.sz-live-filter-group select,
.sz-live-filter-group input[type="text"] {
  width: 100%; height: 38px; padding: 0 12px;
  border-radius: 6px;
  background: rgba(11,12,15,0.6); color: #fff;
  border: 1px solid rgba(184,186,193,0.20);
  font: inherit; font-size: 14px; line-height: 38px;
  outline: none;
}
.sz-live-filter-group select:focus,
.sz-live-filter-group input:focus { border-color: var(--sz-accent); }
.sz-live-filter-group .checks { display: flex; flex-direction: column; gap: 8px; }
.sz-live-filter-group label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #fff; cursor: pointer;
}
.sz-live-filter-group input[type="checkbox"] { accent-color: var(--sz-accent); }
.sz-live-filter-default {
  margin-top: 4px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px; color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.sz-live-filter-default a {
  color: var(--sz-accent); text-decoration: none;
}
.sz-live-filter-default a:hover { text-decoration: underline; }


/* Mobile fixes for network + live */
@media (max-width: 768px) {
  .sz-network-map { height: 400px; }
  .sz-network-map__inner { padding: 40px 16px 20px; flex-direction: column; align-items: flex-start; }
  .sz-network-map__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }

  .sz-search-bar { flex-wrap: wrap; gap: 8px; }
  .sz-search-bar input[type="search"] { flex: 1 1 100%; }
  .sz-search-bar__filter-btn { flex: 1; }
  .sz-search-bar__submit { flex: 1; }

  .sz-network-body, .sz-live-layout { gap: 28px; }
  .sz-live-filters { position: static; }

  .sz-type-strip { margin-bottom: 32px; }
  .sz-type-strip__title { font-size: 1.15rem; }
}