/* gateway.css — shared theme for the Bible-as-Literature gateway and its sub-pages
   (index.html, library.html, featured.html, academic.html, clear.html, strategies.html). */
:root{
  --forest:#054c8c;--forest-deep:#023266;--forest-mid:#2f6cae;--forest-light:#5b8fc0;
  --forest-pale:#12233a;--forest-faint:#eef2fb;--charcoal:#f4f8fc;--charcoal-mid:#ffffff;
  --charcoal-soft:#eef2fb;--charcoal-dim:#516079;--charcoal-mute:#516079;--cream:#161c2e;
  --white:#054c8c;--gold:#fbd239;--gold-light:#7a5208;
  --border-dark:rgba(5,76,140,0.14);--border-mid:rgba(5,76,140,0.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:radial-gradient(ellipse 60% 45% at 85% -5%,rgba(251,210,57,.16)0%,transparent 60%),radial-gradient(ellipse 55% 45% at 0% 100%,rgba(5,76,140,.12)0%,transparent 60%),var(--charcoal);color:var(--cream);line-height:1.6;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:0.6}

/* nav */
.topnav{position:fixed;top:0;left:0;right:0;z-index:200;height:56px;background:rgba(42,84,130,0.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-dark);display:flex;align-items:center;padding:0 32px;gap:8px}
.brand{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:#e9f0fa;text-decoration:none}
.brand span{color:#fbd239}
.navlinks{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.navlinks a{font-size:.72rem;font-weight:500;color:rgba(233,240,250,0.92);text-decoration:none;padding:6px 11px;border-radius:5px;white-space:nowrap;transition:.15s}
.navlinks a:hover{background:rgba(255,255,255,0.12);color:#fff}

/* hero */
.hero{position:relative;min-height:auto;display:flex;align-items:center;justify-content:center;padding:104px 32px 44px;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 50% 40%,rgba(58,110,165,0.28)0%,transparent 65%),radial-gradient(ellipse 40% 40% at 15% 75%,rgba(42,84,130,0.45)0%,transparent 55%),radial-gradient(ellipse 30% 35% at 85% 20%,rgba(91,143,192,0.15)0%,transparent 50%)}
.hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(5,76,140,0.05)1px,transparent 1px),linear-gradient(90deg,rgba(5,76,140,0.05)1px,transparent 1px);background-size:56px 56px;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:920px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#eef2fb;border:1px solid rgba(5,76,140,0.2);border-radius:100px;padding:6px 18px;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#054c8c;animation:fadeDown .7s 0s ease both}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:#fbd239;animation:pulse 2.5s ease infinite}
.hero-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.6rem,7vw,5.4rem);line-height:0.98;letter-spacing:-0.025em;margin:22px 0 6px;animation:fadeDown .7s .1s ease both}
.hero-title em{font-style:italic;color:#2f6cae}
.hero-byline{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-mute);animation:fadeDown .7s .18s ease both}
.hero-desc{font-size:1.02rem;font-weight:300;color:rgba(81,96,121,0.95);max-width:660px;margin:20px auto 30px;animation:fadeDown .7s .25s ease both}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fadeDown .7s .32s ease both}
.btn-primary{display:inline-flex;align-items:center;gap:7px;padding:12px 26px;border-radius:8px;font-size:.85rem;font-weight:600;text-decoration:none;background:var(--forest-mid);color:#fff;transition:filter .2s,transform .15s}
.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}
.btn-secondary{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;border-radius:8px;font-size:.83rem;font-weight:500;text-decoration:none;border:1px solid rgba(5,76,140,0.22);color:rgba(81,96,121,0.95);transition:all .2s}
.btn-secondary:hover{background:rgba(5,76,140,0.08);color:var(--forest-pale);border-color:rgba(81,96,121,0.9)}
.hero-tally{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:44px;animation:fadeDown .7s .4s ease both}
.tally-num{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:700;color:var(--forest-mid);line-height:1;display:block}
.tally-label{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-mute);margin-top:5px}
.tally-divider{width:1px;background:rgba(5,76,140,0.14);align-self:stretch}

/* index strip */
.index-strip{background:var(--forest-deep);border-top:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);padding:14px 32px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;position:relative;z-index:1}
.index-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border:1px solid rgba(143,179,217,0.22);border-radius:100px;font-size:.72rem;color:rgba(214,228,240,0.82);text-decoration:none;transition:.15s}
.index-pill:hover{background:rgba(255,255,255,0.10);color:#fff;border-color:rgba(143,179,217,0.5)}
.pnum{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--forest-light);opacity:.8}

main{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.sec-divider{display:flex;align-items:center;gap:20px;padding:64px 32px 0;max-width:1200px;margin:0 auto}
.sec-divider-line{flex:1;height:1px;background:rgba(5,76,140,0.10)}
.sec-divider-lbl{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(81,96,121,0.9)}
.sec-lead{max-width:1200px;margin:0 auto;padding:14px 32px 0}
.sec-lead h2{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;line-height:1.1;margin-bottom:8px}
.sec-lead p{font-size:.95rem;font-weight:300;color:rgba(81,96,121,0.95);max-width:720px}

/* band cards */
.slides{display:flex;flex-direction:column;gap:28px;padding:28px 24px 20px}
.slide{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(5,76,140,0.08);background:var(--charcoal-mid);display:grid;grid-template-columns:300px 1fr;min-height:230px;opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease,border-color .2s,box-shadow .2s}
.slide.visible{opacity:1;transform:translateY(0)}
.slide:hover{border-color:rgba(5,76,140,0.3);box-shadow:0 16px 60px rgba(0,0,0,0.35)}
.slide-panel{position:relative;padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(160deg,#023266 0%,#054c8c 100%)}
.slide-panel.v2{background:linear-gradient(160deg,#1d3a5c 0%,#023266 100%)}
.slide-panel.v3{background:linear-gradient(160deg,#141f14 0%,#12253f 100%)}
.slide-panel.v4{background:linear-gradient(160deg,#17342a 0%,#054c8c 100%)}
.slide-cat{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:3px;display:inline-block;align-self:flex-start;margin-bottom:16px;background:rgba(251,210,57,0.18);color:#fbd239}
.slide-band{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:900;color:#eef2fb;line-height:1}
.slide-stat-num{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;line-height:1;color:#fbd239}
.slide-stat-lbl{font-family:'DM Mono',monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,240,250,0.7);margin-top:3px}
.slide-wm{position:absolute;bottom:-24px;right:-6px;font-family:'Playfair Display',serif;font-size:7rem;font-weight:900;line-height:1;opacity:.09;color:#9fc2e8;pointer-events:none;user-select:none}
.slide-content{padding:32px 38px;display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid rgba(5,76,140,0.06)}
.slide-content h3{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;margin-bottom:6px}
.slide-content p.desc{font-size:.9rem;font-weight:300;color:rgba(81,96,121,0.95);margin-bottom:14px}
.feat{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.feat-chip{font-size:.7rem;padding:4px 11px;border-radius:100px;border:1px solid rgba(5,76,140,0.2);color:#054c8c;background:#eef2fb}
.slide-actions{display:flex;gap:10px;flex-wrap:wrap}

/* prose cards for framing */
.prose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;padding:24px 24px 8px}
.pcard{background:var(--charcoal-mid);border:1px solid var(--border-dark);border-radius:14px;padding:24px 22px}
.pcard .kicker{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#054c8c;margin-bottom:8px}
.pcard h4{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;margin-bottom:8px}
.pcard p{font-size:.86rem;font-weight:300;color:rgba(81,96,121,0.95)}
.clear-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:16px 24px 0}
.clear-item{background:var(--charcoal-mid);border:1px solid var(--border-dark);border-radius:12px;padding:18px 16px;text-align:center}
.clear-letter{font-family:'Playfair Display',serif;font-size:2rem;font-weight:900;color:var(--forest-mid);line-height:1}
.clear-word{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-pale);margin:6px 0 4px}
.clear-desc{font-size:.76rem;font-weight:300;color:rgba(81,96,121,0.85)}
.clear-figure{max-width:1152px;margin:26px auto 0;padding:0 24px}
.clear-figure img{width:100%;height:auto;display:block;border:1px solid var(--border-dark);border-radius:14px;box-shadow:0 14px 44px rgba(5,76,140,.12)}
.clear-figure figcaption{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(81,96,121,.85);text-align:center;margin-top:10px}

.callout{max-width:1152px;margin:24px auto 0;padding:0 24px}
.callout-inner{background:rgba(252,176,64,0.06);border:1px solid rgba(252,176,64,0.25);border-left:3px solid var(--gold);border-radius:10px;padding:18px 22px}
.callout-inner .kicker{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:6px}
.callout-inner p{font-size:.86rem;font-weight:300;color:rgba(81,96,121,0.95)}

footer{position:relative;z-index:1;background:var(--forest-deep);border-top:1px solid rgba(5,76,140,0.10);padding:36px 32px;margin-top:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-brand{font-family:'Playfair Display',serif;font-size:.95rem;color:#e9f0fa}
.footer-brand span{color:#fbd239}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{font-size:.78rem;color:rgba(215,228,244,0.85);text-decoration:none}
.footer-links a:hover{color:#fff}
.footer-copy{font-family:'DM Mono',monospace;font-size:.62rem;color:rgba(188,205,228,0.75);letter-spacing:.06em}

#back-to-top{position:fixed;bottom:28px;right:28px;z-index:300;width:44px;height:44px;border-radius:50%;background:var(--forest);border:1px solid rgba(81,96,121,0.8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;cursor:pointer;text-decoration:none;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s,background .2s;box-shadow:0 4px 20px rgba(0,0,0,0.4)}
#back-to-top.visible{opacity:1;transform:translateY(0)}
#back-to-top:hover{background:var(--forest-mid)}

/* full library grid */
.lib-bands{padding:22px 24px 8px;display:flex;flex-direction:column;gap:26px;position:relative;z-index:1}
.lib-band-h{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#054c8c;margin:0 0 12px;display:flex;align-items:center;gap:12px}
.lib-band-h::after{content:"";flex:1;height:1px;background:rgba(5,76,140,.12)}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
/* library search toolbar */
.lib-toolbar{max-width:1200px;margin:0 auto 6px;padding:0 24px}
.lib-toolbar-in{background:var(--charcoal-mid);border:1px solid var(--border-dark);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;box-shadow:0 4px 14px rgba(2,50,102,.06)}
#libSearch{flex:1;min-width:200px;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:400;padding:11px 14px;border:2px solid var(--border-dark);border-radius:10px;color:#12233a;background:#fff}
#libSearch:focus{outline:none;border-color:var(--forest-mid)}
#libSearch::placeholder{color:rgba(81,96,121,.7)}
.lib-chips{display:flex;gap:6px;flex-wrap:wrap}
.lib-chip{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.04em;padding:7px 13px;border-radius:100px;border:1.5px solid var(--border-dark);background:#fff;color:rgba(81,96,121,.95);cursor:pointer;transition:.15s}
.lib-chip:hover{border-color:var(--forest-light)}
.lib-chip.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.lib-count{font-family:'DM Mono',monospace;font-weight:500;color:rgba(81,96,121,.95);font-size:.72rem;margin-inline-start:auto;white-space:nowrap}
.lib-empty{max-width:1200px;margin:0 auto;padding:28px 24px;text-align:center;color:rgba(81,96,121,.95);font-size:.95rem}
.lib-card{display:flex;flex-direction:column;background:var(--charcoal-mid);border:1px solid var(--border-dark);border-radius:12px;padding:16px 18px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .15s}
.lib-card:hover{border-color:rgba(5,76,140,.3);box-shadow:0 12px 34px rgba(0,0,0,.12);transform:translateY(-2px)}
.lc-star{font-family:'DM Mono',monospace;font-size:.58rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:6px}
.lc-title{font-family:'Playfair Display',serif;font-size:1.04rem;font-weight:700;color:#12233a;line-height:1.16;margin-bottom:5px}
.lc-blurb{font-size:.8rem;font-weight:300;color:rgba(81,96,121,.95);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lc-open{margin-top:10px;font-size:.72rem;font-weight:600;color:var(--forest-mid)}
.hero-langs{margin-top:22px;font-family:'DM Mono',monospace;font-size:.72rem;display:flex;gap:2px;flex-wrap:wrap;justify-content:center;align-items:center;animation:fadeDown .7s .36s ease both}
.hero-langs .g{margin-inline-end:5px}
.hero-langs .cur{color:var(--gold-light);font-weight:600;padding:2px 5px}
.hero-langs a{color:var(--forest-mid);text-decoration:none;padding:2px 6px;border-radius:4px}
.hero-langs a:hover{background:#eef2fb;color:var(--forest)}
.hero-langs i{color:rgba(5,76,140,.2);font-style:normal}
.langsel{font-family:inherit;font-size:.72rem;font-weight:500;color:rgba(233,240,250,.92);background:rgba(255,255,255,.08);border:1px solid rgba(143,179,217,.3);border-radius:5px;padding:6px 8px;cursor:pointer;margin-inline-start:2px}
.langsel:hover{background:rgba(255,255,255,.16)}
.langsel option{color:#161c2e;background:#fff}

/* search-first gateway header + on-demand find */
.find-sec{max-width:1200px;margin:0 auto;padding:36px 32px 0;position:relative;z-index:1}
.find-sec h2{font-family:'Playfair Display',serif;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;line-height:1.08;margin-bottom:8px}
.find-sec p{font-size:.95rem;font-weight:300;color:rgba(81,96,121,0.95);max-width:720px;margin-bottom:18px}
.find-sec .lib-toolbar{padding:0}

/* standalone sub-pages */
main.subpage{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:84px 0 0}
.subhead{max-width:1200px;margin:0 auto;padding:16px 32px 0}
.backlink{display:inline-block;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-mid);text-decoration:none;margin-bottom:16px}
.backlink:hover{color:var(--forest)}
.subhead .eyebrow{margin-bottom:14px}
.subhead h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,4.2vw,2.9rem);font-weight:900;line-height:1.04;letter-spacing:-.02em;margin:6px 0 10px;color:var(--forest-pale)}
.subhead .sublead{font-size:1rem;font-weight:300;color:rgba(81,96,121,0.95);max-width:760px}

@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

@media(max-width:860px){
  .topnav{padding:0 18px}
  .slide{grid-template-columns:1fr;min-height:auto}
  .slide-content{border-left:none;border-top:1px solid rgba(5,76,140,0.06);padding:26px 22px}
  .slide-panel{padding:26px 22px 22px;min-height:150px;flex-direction:row;align-items:flex-end;justify-content:space-between}
  footer{flex-direction:column;align-items:flex-start;gap:12px;padding:24px 20px}
  .hero-tally{gap:22px}
  .find-sec{padding-top:28px}
}