/* gospel.to directory - builds on /assets/site.css (vars + base) */
:root{ --dir-max:1080px }

.dir-nav{position:sticky;top:0;z-index:30;background:rgba(244,241,234,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.dir-nav-inner{max-width:var(--dir-max);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dir-logo{font-weight:900;font-size:21px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.dir-logo span{color:var(--muted)}
.dir-menu{display:flex;align-items:center;gap:20px}
.dir-menu a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.dir-menu a.plain:hover{color:var(--muted)}
.dir-menu a.cta{background:var(--ink);color:var(--cream);border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 4px 0 var(--lav);padding:7px 15px;font-weight:800}
.dir-menu a.cta:hover{transform:translateY(-1px);box-shadow:4px 6px 0 var(--lav)}
@media(max-width:620px){ .dir-menu{gap:13px;font-size:14px} .dir-menu a.plain{display:none} }

.dir-hero{max-width:var(--dir-max);margin:0 auto;padding:54px 24px 8px;text-align:center}
.dir-hero h1{font-weight:900;font-size:clamp(34px,6vw,54px);line-height:1.04;letter-spacing:-.03em;color:var(--ink);margin:0 0 14px}
.dir-hero p{font-size:1.2rem;color:var(--muted);max-width:42ch;margin:0 auto 24px;line-height:1.5;font-weight:500}
.dir-search{display:flex;max-width:520px;margin:0 auto;border:2.5px solid var(--ink);border-radius:999px;box-shadow:5px 6px 0 var(--ink);background:#fff;overflow:hidden}
.dir-search input{flex:1;min-width:0;border:0;outline:0;font-family:inherit;font-size:16px;padding:14px 20px;background:transparent;color:var(--ink)}
.dir-search button{border:0;background:var(--ink);color:var(--cream);font-family:inherit;font-weight:800;padding:0 22px;cursor:pointer;font-size:15px}

.dir-section{max-width:var(--dir-max);margin:48px auto 0;padding:0 24px}
.dir-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 18px}
.dir-section-head h2{font-weight:900;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink);margin:0}
.dir-section-head a{font-weight:800;color:var(--ink);text-decoration:none;font-size:14px;white-space:nowrap}
.dir-section-head a:hover{color:var(--muted)}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cat-tile{display:block;text-decoration:none;background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;box-shadow:4px 5px 0 var(--ink);padding:16px 16px 14px;transition:transform .14s ease,box-shadow .14s ease}
.cat-tile:hover{transform:translate(-1px,-1px);box-shadow:5px 7px 0 var(--ink)}
.cat-tile .ico{font-size:24px;line-height:1}
.cat-tile h3{margin:8px 0 3px;font-weight:800;font-size:1.05rem;color:var(--ink)}
.cat-tile p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.4}
.cat-tile .n{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-top:7px}

.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.app-card{display:flex;gap:13px;text-decoration:none;background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:4px 5px 0 var(--ink);padding:15px;transition:transform .14s ease,box-shadow .14s ease}
.app-card:hover{transform:translate(-1px,-1px);box-shadow:5px 7px 0 var(--ink)}
.app-card.feat{background:linear-gradient(180deg,#f6f0ff,#fff)}
.app-logo{flex:none;width:52px;height:52px;border-radius:13px;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:var(--ink)}
.app-card-body{min-width:0}
.app-card-body h3{margin:0 0 2px;font-weight:800;font-size:1.05rem;color:var(--ink)}
.app-tagline{margin:0 0 9px;font-size:.86rem;color:var(--muted);line-height:1.4}
.app-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pill{font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border:2px solid var(--ink);border-radius:999px;padding:2px 9px;color:var(--ink)}
.pill.free{background:var(--sage)}
.pill.freemium{background:var(--butter)}
.pill.paid{background:var(--peach)}
.pill.subscription{background:var(--sky)}
.pill.ai{background:var(--lav);letter-spacing:.06em}
.plats{font-size:.74rem;font-weight:700;color:var(--muted)}

.app-card{position:relative}
.newtag{position:absolute;top:-9px;right:12px;background:var(--ink);color:var(--cream);font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--ink);border-radius:999px;padding:2px 9px}

.subtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.subtag{font-size:.72rem;font-weight:700;color:var(--muted);background:var(--paper);border:2px solid var(--hair);border-radius:999px;padding:2px 10px}

.ai-callout{max-width:var(--dir-max);margin:16px auto 0;padding:0 24px;display:flex;gap:12px;align-items:flex-start}
.ai-callout .pill.ai{flex:none;margin-top:2px}
.ai-callout p{margin:0;font-size:.95rem;line-height:1.5;color:var(--body);font-weight:500;max-width:62ch}

.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
.note{border:2.5px solid var(--ink);border-radius:14px;padding:14px 16px;box-shadow:3px 4px 0 var(--ink)}
.note.best{background:#f1f7ec}
.note.alt{background:#fdf4ea}
.note b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px;font-weight:800}
.note p{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink);font-weight:500}

.subnote{color:var(--muted);font-size:.88rem;font-weight:600;margin:0}
.subfilters{margin-top:-10px}
.fchip.ai[aria-pressed="true"]{background:var(--lav)}

.breadcrumbs{max-width:var(--dir-max);margin:18px auto 0;padding:0 24px;font-size:13px;font-weight:600;color:var(--muted)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--ink)}

.app-hd{max-width:var(--dir-max);margin:0 auto;padding:22px 24px 0;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.app-hd .app-logo{width:76px;height:76px;border-radius:18px;font-size:32px;box-shadow:4px 5px 0 var(--ink)}
.app-hd-main{flex:1;min-width:240px}
.app-hd h1{margin:0 0 4px;font-weight:900;font-size:2rem;letter-spacing:-.02em;color:var(--ink)}
.app-hd .tag{margin:0 0 12px;color:var(--muted);font-size:1.08rem;font-weight:500;line-height:1.4}
.app-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;border:2.5px solid var(--ink);border-radius:999px;font-weight:800;font-size:14px;padding:9px 18px;cursor:pointer}
.btn-primary{background:var(--ink);color:var(--cream);box-shadow:4px 5px 0 var(--lav)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:5px 7px 0 var(--lav)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:3px 4px 0 var(--ink)}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:4px 5px 0 var(--ink)}
.app-facts{max-width:var(--dir-max);margin:20px auto 0;padding:16px 24px;display:flex;flex-wrap:wrap;gap:26px;border-top:2px solid var(--hair);border-bottom:2px solid var(--hair)}
.app-facts .f{font-size:.92rem;color:var(--ink);font-weight:600}
.app-facts .f b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{text-decoration:none;font-size:.8rem;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:3px 11px;color:var(--ink);background:var(--paper)}
.chip:hover{background:var(--lav)}
.app-body{max-width:var(--dir-max);margin:22px auto 0;padding:0 24px}
.app-body p{font-size:1.1rem;line-height:1.6;color:var(--body);max-width:68ch}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.fchip{cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:800;border:2px solid var(--ink);border-radius:999px;padding:6px 13px;background:#fff;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.fchip[aria-pressed="true"]{background:var(--lav)}
.noresults{color:var(--muted);font-weight:600;padding:20px 0}
.app-card[hidden]{display:none}

.band{max-width:var(--dir-max);margin:54px auto 0;padding:0 24px}
.band-inner{background:var(--ink);color:var(--cream);border:2.5px solid var(--ink);border-radius:22px;box-shadow:8px 10px 0 var(--lav);padding:32px 28px;text-align:center}
.band-inner h2{color:var(--cream);margin:0 0 8px;font-weight:900;font-size:1.6rem}
.band-inner p{color:#d9d2c4;margin:0 auto 18px;max-width:48ch;line-height:1.5}
.band-inner .btn-primary{background:var(--cream);color:var(--ink);border-color:var(--cream)}

.dir-foot{max-width:var(--dir-max);margin:60px auto 0;padding:28px 24px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.dir-foot .set{display:flex;flex-wrap:wrap;gap:18px}
.dir-foot a{color:var(--muted);text-decoration:none;font-weight:700}
.dir-foot a:hover{color:var(--ink)}