/*
 * Copyright © 2025 DynoshiX. All rights reserved.
 *
 * This CSS file is proprietary and confidential. Unauthorized copying,
 * modification, distribution, or use of this file, in whole or in part,
 * without explicit written permission from the owner is strictly prohibited.
 *
 * For licensing inquiries, please contact: dynoshix@gmail.com.
 */

:root{
  --brand-900:#081226;
  --brand-800:#10283f;
  --brand-700:#1e3a5f;
  --accent:#f6c84c;
  --accent-600:#ffb703;
  --muted:#6b7280;
  --bg-100:#f4f8fb;
  --bg-200:#e8f0f7;
  --glass:rgba(255,255,255,0.7);
  --radius-lg:12px;
  --navbar-height:64px;
  --shadow-soft:0 12px 40px rgba(2,6,23,0.06);
  --max-width:1200px;
}

html,body{height:100%;}
body{
  font-family:'Poppins',sans-serif;
  margin:0;padding:0;
  background:linear-gradient(to bottom,#f4f8fb,#e8f0f7);
  color:#333;
  transition:background-color .3s,color .3s;
}
.dark-mode{background:linear-gradient(to bottom,#121212,#1a1a1a);color:#fff}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:var(--brand-700);color:#fff;border-radius:6px;z-index:9999}

.navbar{
  background:linear-gradient(90deg,var(--brand-800),var(--brand-700));
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;height:var(--navbar-height);
  position:fixed;top:0;left:0;right:0;z-index:1000;
}
.navbar .logo{font-size:1.5rem;font-weight:700;color:#fff}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
.nav-links{display:flex;gap:18px}
.nav-links a{color:#fff;text-decoration:none;font-size:clamp(.95rem,1vw+.6rem,1.05rem);margin:0 12px;font-weight:700;text-transform:uppercase;transition:color .3s}
.nav-links a:hover{color:var(--accent-600)}
.nav-links a.active{color:var(--accent);background:rgba(255,255,255,.06);border-radius:8px;padding-inline:6px}
.nav-links a:focus{outline:3px solid rgba(255,215,0,.18);outline-offset:3px}

@media (max-width:768px){
  .nav-toggle{display:block}
  .nav-links{display:flex;flex-direction:column;position:fixed;top:var(--navbar-height);left:0;right:0;background:linear-gradient(180deg,var(--brand-700),rgba(16,38,63,.95));max-height:0;overflow:hidden;padding:0 12px;gap:6px;align-items:stretch;opacity:0;pointer-events:none;transition:max-height .32s ease,opacity .22s ease;z-index:9998}
  .nav-links a{display:block;padding:14px 12px;margin:0;font-size:1.05rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.04)}
  .nav-links.active{max-height:calc(100vh - var(--navbar-height));opacity:1;pointer-events:auto;padding:8px 12px 18px}
}

@media (max-width:1100px){.nav-links{gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.nav-links a{font-size:.98rem;margin:0 10px;padding:6px 8px}.navbar .logo{margin-right:8px}}
@media (max-width:820px){.nav-links{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}.nav-links a{white-space:nowrap}}
@media (min-width:1600px){.navbar{padding:12px 28px}.nav-links{gap:10px}.nav-links a{margin:0 10px}}

.hero{
  background:linear-gradient(135deg,#1e3a5f,#081226);
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  flex-direction:column;
  padding:20px;
  font-size:2.5rem;
  font-weight:700;
  backdrop-filter:blur(5px);
  animation:fadeIn 2s;
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
  margin-top:80px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background-image:radial-gradient(circle at 30% 20%,rgba(246,200,76,0.15) 0%,transparent 50%),
    radial-gradient(circle at 70% 80%,rgba(246,200,76,0.1) 0%,transparent 50%);
  animation:heroGlow 10s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{opacity:0.5;}
  100%{opacity:1;}
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.hero-content{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
.officer-image{width:200px;height:200px;border-radius:50%;border:5px solid var(--accent);box-shadow:0 6px 22px rgba(246,200,76,.18);margin-bottom:20px;object-fit:cover;animation:fadeIn 1.5s}
.hero h1{font-size:2.8rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--accent)}
.hero p{font-size:1.05rem;color:#E0E0E0;max-width:760px}
.cta-button{background:linear-gradient(90deg,var(--accent),var(--accent-600));color:var(--brand-900);padding:15px 30px;font-size:1.2rem;border-radius:50px;text-decoration:none;font-weight:700;box-shadow:0 8px 22px rgba(16,24,40,.08);transition:background .3s,transform .3s}
.cta-button:hover{transform:scale(1.03);box-shadow:0 12px 28px rgba(16,24,40,.12)}
.btn-primary{background:var(--brand-700);color:#fff;padding:10px 16px;border-radius:8px;border:0;cursor:pointer;font-weight:700}
.btn-outline{background:transparent;color:var(--brand-700);border:2px solid rgba(15,23,42,.06);padding:8px 14px;border-radius:8px}
a:focus,button:focus,.cta-button:focus,.nav-links a:focus{outline:3px solid rgba(255,215,0,.6);outline-offset:3px}

.section{
  padding:100px 20px;
  text-align:center;
  position:relative;
  margin:0;
  background:#ffffff;
}

#biography{background:linear-gradient(to bottom,#ffffff,#f8f9fa);}
#achievements{background:linear-gradient(to bottom,#f8f9fa,#ffffff);position:relative;}
#achievements::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background-image:radial-gradient(circle at 20% 50%,rgba(30,58,95,0.02),transparent 50%);
  pointer-events:none;
}
#articles{background:linear-gradient(to bottom,#ffffff,#f8f9fa);padding:50px 10%;text-align:center;}
#gallery{background:linear-gradient(to bottom,#f8f9fa,#ffffff);padding:50px 20px;}
#media{background:linear-gradient(to bottom,#ffffff,#f8f9fa);position:relative;}
#media::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231e3a5f' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;z-index:0;
}
#honors{background:linear-gradient(to bottom,#f8f9fa,#ffffff);padding:2.5rem 1rem;}
#correspondence{background:linear-gradient(to bottom,#ffffff,#f8f9fa);padding:50px 20px;}
#contact{background:linear-gradient(to bottom,#f8f9fa,#f4f6f8);padding:80px 20px;}

.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem;position:relative;z-index:1}
.section h2{
  font-size:2.5rem;color:var(--brand-700);font-weight:700;
  margin-bottom:20px;text-transform:uppercase;letter-spacing:1px;
  display:inline-block;padding-bottom:10px;position:relative;
}
.section h2::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:80px;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-600));
  border-radius:2px;
}
.articles-container{display:flex;flex-direction:column;gap:25px;align-items:center}
.card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  border:1px solid rgba(255,255,255,.6);
  transition:transform .22s,box-shadow .22s;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(16,24,40,.12);
}

.article-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  width:90%;
  max-width:900px;
  padding:18px;
  background:rgba(255,255,255,0.95);
}
.honor-card,.video-card,.correspondence-card,.achievement-card,.article-card{
  background:rgba(255,255,255,0.95);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
}
.article-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 48px rgba(0,0,0,.15);
}
.article-card img{width:300px;height:180px;object-fit:cover;border-radius:5px;margin-right:20px;border:2px solid #ddd}
.article-card .content{flex:1;text-align:left}
.article-card .content h4{font-size:1.4rem;color:#1e3a5f;font-weight:600;margin-bottom:15px;text-transform:capitalize}
.article-card .content p{font-size:1rem;color:#666;line-height:1.6;margin-bottom:15px}
.divider{margin:15px 0;border:1px solid #ddd;width:100%}
.read-more{font-size:1.1rem;font-weight:600;color:var(--brand-700);text-decoration:none;transition:color .22s}
.read-more:hover{color:var(--brand-900)}

/* Partially-visible reveal */
.partially-visible{overflow:hidden;position:relative;height:200px;transition:height .5s}
.partially-visible img{height:100%;opacity:.7;transition:opacity .3s,transform .3s}
.partially-visible .content{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,.8);padding:15px;border-top:2px solid #f1f1f1}
.partially-visible .read-more{display:inline-block;font-size:1.1rem;color:#007bff;margin-top:10px;font-weight:600}
.partially-visible:hover img{transform:scale(1.05);opacity:1}.hidden{display:none}
.partially-visible::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);pointer-events:none}

.load-more-container{margin-top:20px}
#load-more-btn{background:linear-gradient(90deg,var(--brand-700),var(--brand-800));color:#fff;font-size:1.1rem;padding:10px 25px;border:0;border-radius:6px;cursor:pointer;transition:transform .16s,box-shadow .16s}
#load-more-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,.08)}

/* ===== Gallery ===== */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:20px;
  padding:50px 20px;
}
.gallery-item{
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.gallery-item img{width:100%;height:100%;object-fit:cover}
.gallery-item:hover{transform:translateY(-10px);box-shadow:0 10px 20px rgba(0,0,0,.15)}

/* ===== Honors / Achievements / Media ===== */
.honors-section{
  padding:2.5rem 1rem;
}
.honors-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.6rem;
  align-items:stretch;
}
.honor-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(16,24,40,.06);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.honor-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(16,24,40,.12)}
.honor-media{width:100%;overflow:hidden;background:#f1f5f9;aspect-ratio:16/9;position:relative}
.honor-media>img{width:100%;height:100%;object-fit:cover}
.honor-gallery{display:flex;flex-wrap:wrap;gap:6px;width:100%;height:100%;align-content:stretch}
.honor-gallery a{display:block;width:100%;overflow:hidden;border-radius:6px;flex:1 1 0;box-sizing:border-box}
.honor-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.honor-gallery a:hover img{transform:scale(1.05)}
.honor-body{padding:.6rem .9rem .95rem;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.honor-title{margin:0 0 .5rem 0;font-size:1.05rem;color:#07304a;line-height:1.2}
.honor-body p{color:#475569;margin:0 0 .5rem 0;font-size:.98rem;line-height:1.45}
.honor-body p.description-clamp{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.achievements-section{background:linear-gradient(145deg,#f8fbff,#e9f1f9);padding:5rem 2rem;text-align:center}
.achievements-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1200px;margin:0 auto;padding:0 1rem}
.achievement-card{display:flex;flex-direction:column;align-items:center;padding:1.6rem 1.2rem}
.achievement-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,.15)}
.achievement-card img{width:90px;height:90px;border-radius:50%;object-fit:cover;background:#f1f5f9;padding:10px;box-shadow:0 6px 16px rgba(0,0,0,.1);margin-bottom:1.5rem}
.card-content h3{font-size:1.3rem;color:#0f172a;margin-bottom:.75rem}
.card-content p{color:#475569;font-size:1rem;line-height:1.6}

.video-container{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.video-card{padding:12px}.video-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}.video-figure video{width:100%;height:auto;max-width:360px;border-radius:10px}
.btn-small{background:#1e3a5f;color:#fff;border:0;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600;margin-top:6px}
.btn-small:hover{background:#15324d}

/* ===== Modals (pdf, project, honor) ===== */
.modal{display:none;position:fixed;z-index:10000;inset:0;background-color:rgba(2,6,23,.65);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity 240ms;pointer-events:none}
.modal.active{display:block;opacity:1;pointer-events:auto}
.modal-dialog{width:94%;max-width:980px;margin:5vh auto;background:var(--modal-bg,#fff);border-radius:12px;box-shadow:0 30px 80px rgba(2,6,23,.45);transform:translateY(6px) scale(.995);transition:transform 240ms cubic-bezier(.2,.8,.2,1),opacity 240ms;overflow:hidden;opacity:0}
.modal-dialog{max-height:90vh;display:flex;flex-direction:column}
.modal.active .modal-dialog{transform:translateY(0) scale(1);opacity:1}
.modal-content{padding:1.25rem 1.5rem;color:var(--modal-color,#111827);overflow:auto;max-height:calc(90vh - 2.5rem)}
iframe{width:100%;height:60vh;border:0;border-radius:8px}
body.modal-open{overflow:hidden;touch-action:none}
body.pswp-open{overflow:hidden;touch-action:none}
.modal-content::-webkit-scrollbar{width:10px}.modal-content::-webkit-scrollbar-thumb{background:rgba(15,23,42,.12);border-radius:10px}
.close{position:absolute;top:10px;right:12px;font-size:24px;font-weight:700;color:#0f172a;cursor:pointer;background:rgba(255,255,255,.9);padding:6px 10px;border-radius:8px;border:1px solid rgba(15,23,42,.06)}
.close:focus{outline:3px solid rgba(99,102,241,.22)}

.project-story-modal{display:none}.project-story-modal .modal-dialog{max-width:920px}.project-story-modal .project-story-content{padding:1.4rem 1.6rem}.project-story-modal{position:fixed;inset:0;z-index:2000}.project-story-close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:28px;color:#0f172a;cursor:pointer}.project-story-content h3{margin-top:0;color:#0f172a}.project-story-content p{color:#111827;line-height:1.6}

.honor-detail-modal{display:none}.honor-detail-modal .modal-dialog{max-width:880px}.honor-detail-modal .modal-content{padding:1rem 1.1rem}.honor-detail-modal{position:fixed;inset:0;z-index:2200}.honor-detail-content{border-radius:12px}.honor-detail-close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:26px;color:#0f172a;cursor:pointer}.honor-detail-body{display:grid;grid-template-columns:1fr;gap:1rem}.honor-detail-media{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#f8fafc}.honor-detail-media img{width:100%;height:100%;object-fit:contain;display:block}.honor-detail-title{margin:0 0 .25rem 0;color:#0f172a}.honor-detail-text{color:#374151;line-height:1.6}

/* ===== PhotoSwipe UI helpers ===== */
.pswp-custom-arrow{position:fixed;top:50%;transform:translateY(-50%);font-size:40px;color:#fff;cursor:pointer;user-select:none;z-index:1000;padding:10px 20px;background:rgba(0,0,0,.5);border-radius:5px}
.pswp-left-arrow{left:20px}.pswp-right-arrow{right:20px}.pswp-custom-arrow:hover{background:rgba(0,0,0,.8)}

/* ===== Footer ===== */
.footer{background:var(--brand-700);color:#fff;padding:50px 0;text-align:center;position:relative;margin-top:40px}
.footer::before{content:"";position:absolute;top:-20px;left:0;right:0;height:30px;background:#FFD700;border-radius:50%}
.footer h3{margin-bottom:10px;font-size:2rem}.footer p{margin:0;font-size:1rem}

/* ===== Utility & Small components ===== */
.card img,.img-fluid{transition:transform .3s,box-shadow .3s}.card img:hover,.img-fluid:hover{transform:scale(1.03);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.card-body{background:#fff}.card-title{color:#003366;font-weight:600}p{color:#555}

.correspondence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;align-items:start}
.correspondence-card{padding:.9rem;display:flex;flex-direction:column;gap:.6rem}
.correspondence-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(16,24,40,.12)}
.correspondence-media{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#f8fafc}
.correspondence-media img{width:100%;height:100%;object-fit:cover;display:block}
.correspondence-caption{font-size:.95rem;color:#374151;line-height:1.35;margin:0}.correspondence-meta{font-size:.85rem;color:#6b7280}

/* ===== Responsive tweaks ===== */
@media screen and (max-width:900px){.article-card{flex-direction:column;width:100%}.article-card img{width:100%;height:250px;border-radius:10px}.article-card .content{text-align:center}.read-more{align-self:center}}
@media screen and (max-width:600px){#articles{padding:30px 5%}.article-card .content h4{font-size:1.2rem}.article-card .content p{font-size:.95rem}.read-more{font-size:.95rem}}
@media screen and (min-width:1200px){.article-card{max-width:1000px}}
@media (max-width:520px){.honor-gallery{grid-template-columns:repeat(2,1fr)}.honors-section{padding:1.5rem .75rem}.honor-body{padding:.6rem}.honor-card{min-height:0}.honor-media{aspect-ratio:4/3}.honor-gallery{grid-template-columns:repeat(2,1fr);gap:6px}}

.lightbox{
  display:none;
  position:fixed;
  z-index:10000;
  left:0;top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.95);
  overflow:hidden;
}
.lightbox.active{display:flex;align-items:center;justify-content:center;}
.lightbox-content{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
  animation:zoomIn 0.3s;
}
@keyframes zoomIn{from{transform:scale(0.8);opacity:0;}to{transform:scale(1);opacity:1;}}
.lightbox-close{
  position:absolute;
  top:20px;
  right:40px;
  color:#fff;
  font-size:40px;
  font-weight:bold;
  cursor:pointer;
  z-index:10001;
  transition:color 0.3s;
}
.lightbox-close:hover{color:#f6c84c;}
.lightbox-caption{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:18px;
  text-align:center;
  background:rgba(0,0,0,0.7);
  padding:10px 20px;
  border-radius:8px;
  max-width:80%;
}
.lightbox-prev,.lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.6);
  color:#fff;
  border:none;
  font-size:30px;
  padding:15px 20px;
  cursor:pointer;
  transition:background 0.3s;
  z-index:10001;
}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(246,200,76,0.8);}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
body.lightbox-open{overflow:hidden;}

@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}