/* SAILCC – South Asia International Literature & Cultural Council
   Responsive site stylesheet (mobile-first)
   Author: ChatGPT (GPT-5 Thinking)
*/
:root{
  --bg:#0c0f14;
  --bg-2:#121621;
  --card:#161b28;
  --txt:#e9eef8;
  --muted:#a8b3c7;
  --brand:#f5b044;
  --brand-2:#34c3c3;
  --accent:#e85d2a;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--txt);
  background:radial-gradient(1200px 800px at 10% -10%, #22304a 0%, transparent 60%),
             radial-gradient(1000px 600px at 120% 10%, #2a1e28 0%, transparent 60%),
             var(--bg);
  line-height:1.6;
}

.container{width:min(1100px, 92vw); margin-inline:auto}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(12,15,20,.6);
  border-bottom:1px solid #1f2a44;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.brand img{width:42px; height:42px; object-fit:contain; border-radius:10px}
.brand span{letter-spacing:.5px}

.menu{display:flex; gap:1rem}
.menu a{padding:.5rem .8rem; border-radius:10px; color:var(--txt)}
.menu a:hover{background:#1a2235}

.hamburger{display:inline-flex; flex-direction:column; gap:4px; border:0; background:transparent; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:var(--txt); border-radius:2px}
@media (min-width: 820px){ .hamburger{display:none} }
@media (max-width: 819px){
  .menu{display:none}
  .menu.open{display:flex; flex-direction:column; position:absolute; left:0; right:0; top:60px; background:var(--bg-2); padding:1rem .8rem; border-bottom:1px solid #24304f}
}

.hero{padding: clamp(28px, 6vw, 72px) 0 40px;
  text-align:center;
}
.hero .badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(90deg, #2b364f 0%, #1f2a40 100%);
  padding:.35rem .7rem; border:1px solid #2e3a57; border-radius:999px;
  color:var(--muted); font-size:.86rem;
}
.hero h1{
  font-size: clamp(28px, 6vw, 56px);
  margin:.8rem auto .5rem;
  line-height:1.15;
}
.hero p{color:var(--muted); font-size: clamp(14px, 2.8vw, 18px); margin:.4rem auto 1.2rem; max-width:900px}
.hero-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1rem; border-radius:14px; border:1px solid #2e3a57;
  background:linear-gradient(180deg, #27324b, #1b2236);
  color:var(--txt); box-shadow:var(--shadow); cursor:pointer; font-weight:600;
}
.btn:hover{filter:brightness(1.08)}
.btn.primary{background:linear-gradient(180deg, #f6c36d, #f5b044); color:#1a1205; border-color:#e49b1f}

.hero-figure{
  margin: 26px auto 0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid #2e3a57;
  border-radius:var(--radius);
  padding: 1rem;
  width:min(900px, 94%);
  box-shadow:var(--shadow);
}
.hero-figure img{width:100%; height:auto; display:block; border-radius:14px; background:#0b0e14}

.section{padding:64px 0}
.section h2{
  font-size: clamp(22px, 4.8vw, 34px);
  margin:0 0 .6rem;
}
.lead{color:var(--muted)}

.grid{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .grid.cols-3{grid-template-columns:repeat(3, 1fr)} }
@media (min-width:700px){ .grid.cols-2{grid-template-columns:repeat(2, 1fr)} }

.card{
  background:linear-gradient(180deg, #1a2133, #121823);
  border:1px solid #25324e; border-radius:16px; padding:18px;
  box-shadow:var(--shadow);
}
.card h3{margin:.2rem 0 .4rem; font-size:1.15rem}
.card p{color:var(--muted); margin:.2rem 0 .8rem}

.icon{
  width:36px; height:36px; display:inline-grid; place-items:center;
  border-radius:10px; background:#233053; color:#fff; font-weight:800;
}

.list{margin:.6rem 0 0; padding-left:1.1rem}
.list li{margin:.35rem 0}
.list li::marker{color:var(--brand)}

.kv{
  display:grid; gap:10px; grid-template-columns:120px 1fr; align-items:center;
  padding:14px; background:linear-gradient(180deg, #182034, #0f1422);
  border:1px solid #263352; border-radius:14px; margin:10px 0;
}
.kv strong{color:#fff}
.kv span{color:var(--muted)}

.cta-bar{
  margin:30px 0 0; display:flex; gap:10px; flex-wrap:wrap;
}

.footer{
  margin-top:30px; padding:24px 0 60px; color:var(--muted);
  border-top:1px solid #24304f; background:#0a0d14;
}
.footer a{color:var(--muted)}
.footer .grid{gap:20px}
.small{font-size:.92rem}

.badge-inline{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.18rem .48rem; border-radius:999px; font-size:.78rem;
  border:1px solid #34446b; color:var(--muted); background:#12192a;
}

hr.sep{
  border:0; border-top:1px solid #24304f; margin:28px 0;
}


/* Council main headline styling */
.hero h1.council{

  font-size: clamp(30px, 7vw, 64px); /* slightly smaller */
  margin:.1rem auto .4rem;
  line-height:1.05;
  letter-spacing:.2px;
  background: linear-gradient(90deg, #ff6b6b, #f5b044, #34c3c3, #7b5cff, #ff6b6b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
 animation: rainbowShift 10s linear infinite;
  background: linear-gradient(90deg, #ff6b6b, #f5b044, #34c3c3, #7b5cff, #ff6b6b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowShift 10s linear infinite;
}

.hero .subtitle{
  color: var(--txt);
  font-weight:600;
  font-size: clamp(16px, 3.6vw, 24px);
  letter-spacing:.3px;
  margin:.2rem auto .8rem;
}


@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero h1.council{

  font-size: clamp(30px, 7vw, 64px); /* slightly smaller */
  margin:.1rem auto .4rem;
  line-height:1.05;
  letter-spacing:.2px;
  background: linear-gradient(90deg, #ff6b6b, #f5b044, #34c3c3, #7b5cff, #ff6b6b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
 animation: rainbowShift 10s linear infinite;
  background: linear-gradient(90deg, #ff6b6b, #f5b044, #34c3c3, #7b5cff, #ff6b6b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowShift 10s linear infinite;
}

.hero .council-desc{
  color: var(--muted);
  font-size: clamp(14px, 2.8vw, 18px);
  margin:.5rem auto 1rem;
  max-width: 800px;
}

.hero .subtitle.big{
  font-weight:700;
  font-size: clamp(22px, 5.8vw, 42px);
  color: var(--txt);
  margin:.8rem auto 1.2rem;
}


.intro-lines{
  color:var(--muted);
  font-size: clamp(14px, 3.2vw, 18px);
  margin:.2rem auto .6rem;
}
.tagline-big{
  font-weight:800;
  font-size: clamp(22px, 6vw, 44px);
  margin:.2rem auto 1rem;
  letter-spacing:.2px;
 line-height:1.05; }
@keyframes rainbowShift{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}