:root {
  --O: #E85D1A; --D: #0d0d0d; --W: #ffffff; --OW: #FAF9F8; --G: #444444;
  --SS: 'Source Serif 4', Georgia, serif; --SN: 'Inter', -apple-system, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--SN); color:var(--G); background:var(--W); overflow-x:hidden; }
p,h1,h2,h3 { margin:0; }
a { text-decoration:none; color:inherit; cursor:pointer; }
button { font-family:var(--SN); cursor:pointer; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--D); }
::-webkit-scrollbar-thumb { background:var(--O); border-radius:2px; }
::selection { background:var(--O); color:white; }

@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.eftick { animation:ticker 32s linear infinite; display:inline-flex; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.efpulse { animation:pulse 2s ease infinite; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.fadein { animation:fadeUp 0.5s ease both; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal.d1 { transition-delay:0.08s; } .reveal.d2 { transition-delay:0.16s; }
.reveal.d3 { transition-delay:0.24s; } .reveal.d4 { transition-delay:0.32s; }

.stag { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.stag-line { width:20px; height:1.5px; background:var(--O); flex-shrink:0; }
.stag-text { font-size:10px; font-weight:600; color:var(--O); letter-spacing:0.26em; text-transform:uppercase; font-family:var(--SN); }

.navlink { color:rgba(255,255,255,0.55); font-size:12px; font-weight:500; letter-spacing:0.04em; transition:color 0.15s; font-family:var(--SN); padding:8px 0; border-bottom:2px solid transparent; }
.navlink:hover { color:var(--W); }
.navlink.active { color:var(--W); border-bottom-color:var(--O); }

.arm-card { background:var(--W); border-radius:12px; padding:28px; border-top:3px solid #e0e0e0; transition:all 0.25s ease; box-shadow:0 2px 10px rgba(0,0,0,0.04); display:block; position:relative; }
.arm-card.live { border-top-color:var(--O); }
.arm-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,0.11); }

.pillar-card { background:rgba(255,255,255,0.04); border-radius:10px; padding:22px 22px 24px; border:1px solid rgba(255,255,255,0.07); transition:all 0.25s; }
.pillar-card:hover { background:rgba(232,93,26,0.06); border-color:rgba(232,93,26,0.35); transform:translateY(-3px); }

.news-card { background:var(--W); border-radius:12px; overflow:hidden; border:1px solid #f0f0f0; transition:all 0.25s; cursor:pointer; height:100%; display:flex; flex-direction:column; }
.news-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,0.09); }
.news-card-img { width:100%; height:180px; object-fit:cover; background:#eee; }

.list-opt { cursor:pointer; border-radius:10px; padding:16px 18px; border:2px solid #ebebeb; background:var(--W); transition:all 0.2s; display:flex; align-items:flex-start; gap:12px; user-select:none; }
.list-opt:hover { border-color:#ddd; }
.list-opt.checked { border-color:var(--O); background:rgba(232,93,26,0.04); }
.list-check { width:20px; height:20px; border-radius:50%; border:2px solid #ddd; background:transparent; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; transition:all 0.15s; }
.list-opt.checked .list-check { border-color:var(--O); background:var(--O); }

.footer-link { font-size:12px; color:rgba(255,255,255,0.3); margin-bottom:9px; cursor:pointer; transition:color 0.15s; display:block; }
.footer-link:hover { color:rgba(255,255,255,0.65); }

.email-input { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:14px 16px; font-size:14px; color:var(--W); font-family:var(--SN); outline:none; }
.email-input:focus { border-color:var(--O); }

.sub-btn { width:100%; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.25); border:none; cursor:default; font-size:13px; font-weight:600; letter-spacing:0.06em; padding:15px 0; border-radius:8px; transition:all 0.2s; }
.sub-btn.active { background:var(--O); color:var(--W); cursor:pointer; }

.pdf-btn { background:var(--O); color:var(--W); border:none; cursor:pointer; font-size:13px; font-weight:600; letter-spacing:0.06em; padding:14px 30px; border-radius:4px; font-family:var(--SN); }
.ghost-btn { background:none; border:1px solid #ddd; cursor:pointer; padding:10px 20px; border-radius:4px; font-size:12px; font-weight:500; color:#666; font-family:var(--SN); }

.tilt-card { transform-style:preserve-3d; will-change:transform; transition:transform 0.12s ease-out, box-shadow 0.25s ease; position:relative; }
.tilt-glare { position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity 0.2s ease; background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,0.25), transparent 60%); }
.tilt-card:hover .tilt-glare { opacity:1; }
.logo-3d { transform-style:preserve-3d; transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1); display:inline-block; }
.logo-3d:hover { transform:rotateY(18deg) rotateX(-6deg) scale(1.05); }
.hero-layer { transition:transform 0.15s ease-out; will-change:transform; }
.orb3d { position:absolute; border-radius:50%; filter:blur(0.5px); pointer-events:none; }

.filter-pill { font-size:12px; font-weight:500; padding:9px 18px; border-radius:20px; border:1px solid #ddd; background:var(--W); color:#666; transition:all 0.2s; }
.filter-pill.active { background:var(--D); color:var(--W); border-color:var(--D); }
.filter-pill:hover:not(.active) { border-color:var(--O); color:var(--O); }

.rank-row { display:flex; align-items:center; gap:20px; padding:20px; border-radius:10px; background:var(--W); border:1px solid #f0f0f0; transition:all 0.2s; cursor:pointer; }
.rank-row:hover { border-color:var(--O); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.rank-num { font-family:var(--SS); font-size:32px; font-weight:700; color:rgba(232,93,26,0.3); min-width:48px; }
.rank-photo { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#eee; }

.podcast-card { background:var(--D); border-radius:12px; overflow:hidden; cursor:pointer; transition:all 0.25s; }
.podcast-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,0.25); }

.issue-card { background:var(--W); border-radius:10px; padding:22px 24px; border:1px solid #f0f0f0; cursor:pointer; transition:all 0.2s; }
.issue-card:hover { border-color:var(--O); box-shadow:0 8px 22px rgba(0,0,0,0.06); }

.profile-photo-lg { width:120px; height:120px; border-radius:50%; object-fit:cover; background:#eee; border:3px solid var(--O); }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:2000; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--W); border-radius:16px; max-width:820px; width:100%; overflow:hidden; margin-bottom:40px; }
.modal-close { position:absolute; top:16px; right:16px; background:rgba(0,0,0,0.5); color:#fff; border:none; width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; z-index:10; }

/* Large hero cover on the story detail page (includes/story_detail_view.php)
   — deliberately its own class, not reusing .news-card-img's 180px card
   thumbnail height, since this needs to read as a proper cover, not a card. */
.story-cover { width:100%; height:440px; object-fit:cover; display:block; background:#eee; }

@media (max-width: 860px) {
  .grid2 { grid-template-columns:1fr !important; }
  .grid3 { grid-template-columns:1fr !important; }
  .grid4 { grid-template-columns:1fr 1fr !important; }
  .desktop-nav { display:none !important; }
  .mobile-nav-controls { display:flex !important; }
  h1 { font-size:42px !important; }
  .story-cover { height:240px; }
}
#searchResults::-webkit-scrollbar { width:4px; }
.search-result { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:14px 16px; cursor:pointer; transition:all 0.15s; }
.search-result:hover { border-color:var(--O); background:rgba(232,93,26,0.06); }
.count-up { font-variant-numeric:tabular-nums; }
#app.page-fade { opacity:0; transform:translateY(10px); }
#app { transition:opacity 0.35s ease, transform 0.35s ease; }
.audio-player { width:100%; }

/* ============ STICKY PODCAST PLAYER (podcast.php) ============ */
.ef-player-bar { position:fixed; left:0; right:0; bottom:0; transform:translateY(100%); background:var(--D); border-top:1px solid rgba(255,255,255,0.08); box-shadow:0 -10px 34px rgba(0,0,0,0.35); z-index:1400; transition:transform 0.35s cubic-bezier(.2,.8,.2,1); }
.ef-player-bar.open { transform:translateY(0); }
.ef-player-scrub-track { position:relative; height:4px; background:rgba(255,255,255,0.08); cursor:pointer; }
.ef-player-scrub-fill { position:absolute; top:0; left:0; height:100%; width:0%; background:var(--O); pointer-events:none; }
.ef-player-scrub-handle { position:absolute; top:50%; left:0%; width:11px; height:11px; border-radius:50%; background:var(--O); transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(232,93,26,0.18); opacity:0; transition:opacity 0.15s; pointer-events:none; }
.ef-player-scrub-track:hover .ef-player-scrub-handle { opacity:1; }
.ef-player-inner { max-width:1100px; margin:0 auto; padding:12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:center; gap:18px; }
.ef-player-meta { display:flex; align-items:center; gap:14px; min-width:0; flex:1; }
.ef-player-art { width:44px; height:44px; border-radius:8px; background:rgba(232,93,26,0.12); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ef-player-art img { width:100%; height:100%; object-fit:cover; display:block; }
.ef-player-text { min-width:0; }
.ef-player-title { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; }
.ef-player-sub { font-size:11px; color:rgba(255,255,255,0.4); margin-top:3px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; }
.ef-player-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ef-transport-btn { background:none; border:none; color:rgba(255,255,255,0.6); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:7px; border-radius:50%; transition:color 0.15s, background 0.15s; }
.ef-transport-btn:hover { color:#fff; background:rgba(255,255,255,0.08); }
.ef-transport-btn--main { width:38px; height:38px; background:var(--O); color:#fff; }
.ef-transport-btn--main:hover { background:#fff; color:var(--O); }
.ef-transport-btn:disabled { opacity:0.25; cursor:default; pointer-events:none; }
.ef-player-extra { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ef-speed-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.65); font-size:10.5px; font-weight:600; padding:6px 10px; border-radius:20px; cursor:pointer; min-width:38px; transition:all 0.15s; }
.ef-speed-btn:hover { border-color:var(--O); color:var(--O); }
.ef-close-btn { background:none; border:none; color:rgba(255,255,255,0.3); cursor:pointer; padding:6px; display:flex; transition:color 0.15s; }
.ef-close-btn:hover { color:rgba(255,255,255,0.7); }
@media (max-width: 640px) {
  .ef-player-text { display:none; }
  .ef-player-extra .ef-speed-btn { display:none; }
  .ef-player-inner { padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap:12px; }
}
.audio-placeholder { background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.15); border-radius:8px; padding:16px; text-align:center; font-size:11px; color:rgba(255,255,255,0.35); }