/* FaithArt — quiet art bands + lightbox for /faith (paired with faith/art/art.js).
   Site palette only: navy ground, wheat-gold accent, no green. The band must read
   as a footnote to the passage, never a competitor to it. */

.fa-band{display:flex;align-items:stretch;gap:12px;margin:12px 0 4px;padding:8px;
  background:linear-gradient(155deg,#131d38,#0f1830);border:1px solid #23304f;border-radius:12px;
  position:relative;max-width:56ch}
.fa-band.fa-quiet{margin:14px auto 0;max-width:430px}
.fa-thumb{flex:0 0 auto;width:112px;height:84px;padding:0;border:0;border-radius:8px;overflow:hidden;
  cursor:zoom-in;background:#0b1226}
.fa-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96)}
.fa-thumb:hover img,.fa-thumb:focus-visible img{filter:none}
.fa-cap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding-right:14px}
.fa-scene{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#f3c849;opacity:.85}
html[lang^=zh] .fa-scene,.fa-scene:lang(zh){letter-spacing:.3em}
.fa-work{font-size:.84rem;color:#cdd7f0;font-family:Georgia,"Songti SC","Noto Serif SC",serif}
.fa-work .fa-more{color:#8fa0c6;font-size:.75rem;font-family:inherit}
.fa-note{font-size:.78rem;color:#8fa0c6;line-height:1.5;max-width:52ch}
.fa-off{position:absolute;top:6px;right:6px;width:22px;height:22px;line-height:20px;padding:0;
  border:0;border-radius:50%;background:transparent;color:#5c6c94;font-size:.72rem;cursor:pointer;opacity:0}
.fa-band:hover .fa-off,.fa-off:focus-visible{opacity:1}
.fa-off:hover{background:#1a2848;color:#cdd7f0}
@media (max-width:560px){
  .fa-thumb{width:86px;height:70px}
  .fa-note{display:none}
  .fa-off{opacity:.55}
}

/* ——— browse-page toolbar (museum-collection pattern: sticky search + filters) ——— */
.fa-bar{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:14px -8px 8px;padding:10px 8px;background:rgba(11,17,38,.92);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-bottom:1px solid #1a2545}
.fa-bar input[type=search]{flex:1 1 220px;min-width:160px;background:#0d1528;border:1px solid #35426a;
  border-radius:999px;color:#eef2ff;padding:8px 16px;font-size:.92rem;outline:none}
.fa-bar input[type=search]:focus{border-color:#3b6fe0}
.fa-bar input[type=search]::placeholder{color:#5c6c94}
.fa-chips{display:flex;gap:6px}
.fa-chips button{background:none;border:1px solid #35426a;border-radius:999px;color:#8fa0c6;
  padding:6px 13px;font-size:.84rem;cursor:pointer;white-space:nowrap}
.fa-chips button.on{border-color:#f3c849;color:#f3c849}
.fa-bar select{background:#0d1528;border:1px solid #35426a;border-radius:999px;color:#cdd7f0;
  padding:7px 12px;font-size:.86rem;max-width:170px}
.fa-nres{color:#8fa0c6;font-size:.82rem;min-width:64px}
.fa-book{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#8fa0c6;
  margin:22px 0 10px;scroll-margin-top:74px}
html[lang^=zh] .fa-book{letter-spacing:.3em}
.fa-empty{color:#8fa0c6;font-size:.92rem;margin:26px 0;font-style:italic}
@media (max-width:560px){
  .fa-bar{gap:7px}
  .fa-nres{display:none}
}

/* toast for the hide-everywhere undo */
.fa-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1200;
  background:#16223f;border:1px solid #2a3d6e;border-radius:999px;color:#cdd7f0;
  font-size:.85rem;padding:9px 16px;box-shadow:0 8px 30px rgba(4,8,20,.55);white-space:nowrap}
.fa-toast button{margin-left:10px;border:0;border-radius:999px;background:#f3c849;color:#0e1730;
  font-weight:700;font-size:.8rem;padding:4px 12px;cursor:pointer}

/* Ruth settings-row toggle */
.fa-tog{display:inline-flex;align-items:center;gap:8px;color:#8fa0c6;font-size:.85rem;cursor:pointer}
.fa-tog input{accent-color:#f3c849}

/* ——— lightbox ——— */
.fa-view{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center}
.fa-v-scrim{position:absolute;inset:0;background:rgba(5,9,20,.94)}
body.fa-view-open{overflow:hidden}
.fa-v-fig{position:relative;margin:0;max-width:94vw;max-height:94vh;display:flex;flex-direction:column;align-items:center}
.fa-v-imgwrap{position:relative;overflow:hidden;border-radius:6px;max-width:94vw;
  display:flex;align-items:center;justify-content:center;touch-action:none}
.fa-v-img{max-width:92vw;max-height:72vh;object-fit:contain;display:block;
  transition:transform .12s ease-out;cursor:zoom-in;transform-origin:center center;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.fa-v-imgwrap.zoomed .fa-v-img{cursor:grab}
@media (prefers-reduced-motion:reduce){.fa-v-img{transition:none}}
.fa-v-cap{margin-top:12px;text-align:center;color:#cdd7f0;display:flex;flex-direction:column;gap:3px;
  max-width:70ch;padding:0 12px}
.fa-v-scene{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#f3c849;opacity:.9}
html[lang^=zh] .fa-v-scene,.fa-v-scene:lang(zh){letter-spacing:.3em}
.fa-v-cap b{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-weight:600;font-size:1.02rem}
.fa-v-cap>span{font-size:.85rem;color:#8fa0c6}
.fa-v-note{font-size:.85rem;color:#aeb9d6!important;line-height:1.55}
.fa-v-credit{font-size:.72rem;color:#5c6c94!important}
.fa-v-links{display:flex;gap:16px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.fa-v-links a{color:#f3c849;font-size:.85rem;text-decoration:none}
.fa-v-links a:hover{text-decoration:underline}
.fa-v-share{border:0;background:none;padding:0;color:#f3c849;font-size:.85rem;cursor:pointer;font-family:inherit}
.fa-v-share:hover{text-decoration:underline}
.fa-v-close{position:absolute;top:-4px;right:-2px;width:34px;height:34px;border-radius:50%;border:1px solid #2a3d6e;
  background:#16223f;color:#cdd7f0;font-size:.9rem;cursor:pointer;z-index:2}
.fa-v-nav{position:absolute;top:38%;width:40px;height:56px;border:1px solid #2a3d6e;border-radius:10px;
  background:rgba(22,34,63,.82);color:#cdd7f0;font-size:1.5rem;cursor:pointer;z-index:2}
.fa-v-prev{left:-6px}.fa-v-next{right:-6px}
@media (max-width:560px){
  .fa-v-img{max-height:58vh}
  .fa-v-nav{top:auto;bottom:-8px;width:56px;height:38px}
  .fa-v-prev{left:12%}.fa-v-next{right:12%}
  .fa-v-close{top:2px;right:2px}
}