/* Local preview: glass-inspired navigation, solid reading surfaces. No new services. */
body.hub {
  --glass-edge: #ffffff70;
  --glass-shine: #ffffff65;
  --glass-shadow: 0 10px 32px #24192c0d, inset 0 1px 0 var(--glass-shine);
  background-image: radial-gradient(ellipse at 10% 0, #d6b36a24, transparent 42%), radial-gradient(ellipse at 90% 24%, #bba4ce18, transparent 38%);
}
.hub .site-header {
  /* Stay in document flow: no scroll-triggered transforms or sticky overlay. */
  position: relative;
  margin: 12px 16px 0;
  top: 0;
  border: 1px solid #ffffff30;
  border-radius: 24px;
  background: var(--hub-dark);
  background: linear-gradient(145deg, #ffffff12, #ffffff00 60%), color-mix(in srgb, var(--hub-dark) 94%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
  box-shadow: 0 12px 36px #17101d26, inset 0 1px 0 #ffffff26;
}
.hub .brand-row { padding-inline: clamp(20px, 3vw, 60px); }
.hub [id] { scroll-margin-top: 24px; }
.hub .page-outline { top: 24px; max-height: calc(100dvh - 48px); }
.hub #site-nav { padding-inline: clamp(16px, 3vw, 60px); padding-bottom: 5px; }
.hub .nav-group-hub summary, .hub .home-link { padding-inline: 10px; border-radius: 12px; }
.hub .home-link:hover, .hub .nav-group-hub summary:hover { background: #ffffff0c; }
.hub .nav-drop { border-radius: 20px; box-shadow: 0 20px 50px #17101d30, inset 0 1px 0 #ffffff65; }
.hub .nav-drop a { border-radius: 12px; }
.hub .tool, .hub .button, .hub .library-filter button, .hub .ghost, .hub .chip,
.hub .download-mini, .hub .dialog-close, .hub .track-listen {
  border-radius: 999px;
  min-height: 44px;
  box-shadow: inset 0 1px 0 #ffffff26, 0 3px 8px #20162509;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.hub .tool { background: linear-gradient(#ffffff0d, #ffffff03); }
.hub .back-top { background-color: var(--hub-dark); color: var(--hub-light); }
.hub .button:not(.secondary) { background-image: linear-gradient(#ffffff14, #00000008); }
.hub .library-filter { gap: 10px; }
.hub .library-filter button:not(.active), .hub .button.secondary {
  background: var(--hub-surface);
  background: linear-gradient(145deg, var(--glass-shine), transparent), color-mix(in srgb, var(--hub-surface) 90%, transparent);
}
.hub .library-card, .hub .path-grid>a, .hub .study-tile, .hub .reading-path,
.hub .companion-paths>a, .hub .question-form, .hub .editorial-note,
.hub .answered-question {
  border-radius: 24px;
  border: 1px solid var(--hub-line);
  border-color: color-mix(in srgb, var(--hub-line) 55%, var(--glass-edge));
  background: var(--hub-surface);
  background: linear-gradient(145deg, var(--glass-shine), transparent 55%), color-mix(in srgb, var(--hub-surface) 96%, transparent);
  box-shadow: var(--glass-shadow);
}
.hub .library-card, .hub .path-grid>a, .hub .study-tile, .hub .companion-paths>a {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.hub .library-card { overflow: hidden; }
.hub .library-art {
  height: 232px;
  flex-shrink: 0;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--hub-line);
  border-color: color-mix(in srgb, var(--hub-line) 40%, transparent);
  background: var(--hub-bg);
  background: radial-gradient(ellipse at 50% 20%, var(--glass-shine), transparent 75%), color-mix(in srgb, var(--hub-bg) 88%, var(--hub-line));
  cursor: pointer;
}
.hub .library-art img { object-fit: contain; filter: drop-shadow(0 5px 8px #21172924); }
.hub .library-copy { padding: 28px; }
.hub .library-copy .text-link>span { transition: transform .2s ease; }
.hub .path-section { background: transparent; }
.hub .hub-hero { margin: 24px auto 0; width: calc(100% - 48px); max-width: 1680px; gap: 24px; border: 0; min-height: 0; }
.hub .hero-copy { padding: clamp(32px, 4vw, 70px); }
.hub .hero-art--christ { border: 1px solid #ffffff45; border-radius: 28px; box-shadow: 0 16px 44px #20162526, inset 0 1px 0 #ffffff45; }
.hub .hero-art--christ::after { border-radius: 14px; }
.hub .hero-art--christ>img, .hub .hero-art--christ .artwork-trigger img { height: min(660px, max(150px, calc(100dvh - var(--art-header-height, 160px) - 212px))); }
.hub .home-history-art { border-radius: 24px; overflow: hidden; }
.hub .collection-head { background: transparent; }
.hub .hub-dialog, .hub .image-dialog, .hub #music-dock { border-radius: 24px; box-shadow: 0 24px 80px #17101d40; }
.hub .hub-dialog { background: var(--hub-surface); }
.hub .hub-dialog::backdrop, .hub .image-dialog::backdrop { background: #100b1680; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.hub .artwork-preview { border-radius: 16px; box-shadow: 0 12px 30px #17101d30; }
.hub input:not([type=checkbox]), .hub select, .hub textarea { border-radius: 12px; }
.hub .card, .hub .qa, .hub .study, .hub .visit-answers details,
.hub .companion-answer, .hub .companion-practice { border-radius: 18px; }
.hub .card-head, .hub .qa-head { border-radius: 18px 18px 0 0; }
.hub .card-head[aria-expanded=false], .hub .qa-head[aria-expanded=false] { border-radius: 18px; }
.hub .leaf { border-radius: 10px; }
/* Text pages remain opaque. Glass is decoration, never an obstacle to reading. */
.hub .reader-content .leaf, .hub .reader-content .qa-body { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) and (pointer: fine) {
  .hub .library-card:hover, .hub .path-grid>a:hover, .hub .study-tile:hover, .hub .companion-paths>a:hover {
    transform: translateY(-5px);
    border-color: var(--hub-line);
    box-shadow: 0 18px 40px #24192c1c, inset 0 1px 0 var(--glass-shine);
  }
  .hub .library-card:hover .text-link>span { transform: translate(3px, -2px); }
  .hub .tool:hover, .hub .button:hover, .hub .library-filter button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px #20162517, inset 0 1px 0 #ffffff40; }
}
.hub .library-card:active, .hub .tool:active, .hub .button:active { transform: translateY(0); }
.hub.reading-night { --glass-edge: #ffffff20; --glass-shine: #ffffff09; --glass-shadow: 0 10px 32px #00000024, inset 0 1px 0 #ffffff12; }
@media (max-width: 1180px) {
  .hub .site-header { margin: 8px 10px 0; top: 0; border-radius: 20px; }
  .hub .nav-drop { box-shadow: none; }
}
@media (max-width: 800px) {
  .hub .hub-hero { width: calc(100% - 32px); gap: 16px; margin-top: 16px; }
  .hub .hero-copy { padding: 28px 12px; }
}
@media (max-width: 560px) {
  .hub .site-header { margin: 6px 6px 0; top: 0; border-radius: 18px; }
  .hub .brand-row { padding: 14px 12px; gap: 12px; }
  .hub .header-tools { gap: 6px; }
  .hub .tool { padding-inline: 12px; min-height: 44px; }
  .hub .library-copy { padding: 24px; }
  .hub .library-art { height: 235px; }
  .hub .hero-art--christ { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub .library-card, .hub .path-grid>a, .hub .study-tile, .hub .companion-paths>a,
  .hub .tool, .hub .button, .hub .library-filter button, .hub .library-copy .text-link>span {
    transition: none!important; transform: none!important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .hub .site-header { background: var(--hub-dark); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hub .library-card, .hub .path-grid>a, .hub .study-tile, .hub .companion-paths>a,
  .hub .reading-path, .hub .question-form { background: var(--hub-surface); }
  .hub .hub-dialog::backdrop, .hub .image-dialog::backdrop { background: #100b16e6; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .hub .site-header, .hub .library-card, .hub .tool, .hub .button { border: 1px solid CanvasText; box-shadow: none; background: Canvas; color: CanvasText; }
}