/* empoweringindia.org — main.css — token set --emp-*, class prefix epw-* */

:root{
  --emp-base:#14181b;
  --emp-base-2:#1e2429;
  --emp-surface:#2a3238;
  --emp-type:#e6e9ea;
  --emp-type-2:#9aa5ab;
  --emp-mark:#5fb3a1;
  --emp-mark-2:#7f9bd1;
  --emp-line:#39434a;

  --emp-sp-1:11px;
  --emp-sp-2:22px;
  --emp-sp-3:33px;
  --emp-sp-4:55px;
  --emp-sp-5:88px;
  --emp-sp-6:143px;

  --emp-fs-1:15px;
  --emp-fs-2:18px;
  --emp-fs-3:23px;
  --emp-fs-4:28px;
  --emp-fs-5:34px;
  --emp-fs-6:43px;
  --emp-fs-7:54px;

  --emp-radius-flat:0;
  --emp-radius-round:26px;

  --emp-max:1067px;

  --emp-motion-fast:95ms;
  --emp-motion-slow:420ms;

  --emp-font-head:'Fahkwang',sans-serif;
  --emp-font-body:'Anuphan',sans-serif;
}

@font-face{
  font-family:'Fahkwang';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/typeface/fahkwang-600.woff2') format('woff2');
}
@font-face{
  font-family:'Anuphan';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/typeface/anuphan-400.woff2') format('woff2');
}
@font-face{
  font-family:'Anuphan';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/typeface/anuphan-600.woff2') format('woff2');
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--emp-base);
  color:var(--emp-type);
  font-family:var(--emp-font-body);
  font-weight:400;
  font-size:var(--emp-fs-2);
  line-height:1.7;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--emp-mark);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--emp-mark-2);}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--emp-mark);outline-offset:2px;}

h1,h2,h3,h4{
  font-family:var(--emp-font-head);
  font-weight:600;
  line-height:1.25;
  margin:0 0 var(--emp-sp-2) 0;
  color:var(--emp-type);
}
h1{font-size:var(--emp-fs-6);}
h2{font-size:var(--emp-fs-5);}
h3{font-size:var(--emp-fs-4);}
h4{font-size:var(--emp-fs-3);}
p{margin:0 0 var(--emp-sp-2) 0;}
ul,ol{margin:0 0 var(--emp-sp-2) 0;padding-left:var(--emp-sp-3);}
li{margin-bottom:var(--emp-sp-1);}

.epw-shell{
  max-width:1067px;
  margin:0 auto;
  padding:0 var(--emp-sp-2);
}

/* ---- header / nav (always visible, wraps on small screens, no display:none toggle) ---- */
.epw-head{
  background:var(--emp-base-2);
  border-bottom:1px solid var(--emp-line);
}
.epw-head-frame{
  max-width:1067px;
  margin:0 auto;
  padding:var(--emp-sp-2);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--emp-sp-2);
  justify-content:space-between;
}
.epw-brand{
  font-family:var(--emp-font-head);
  font-weight:600;
  font-size:var(--emp-fs-3);
  color:var(--emp-type);
  text-decoration:none;
}
.epw-brand:hover{color:var(--emp-mark);}
.epw-nav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--emp-sp-2);
  list-style:none;
  margin:0;
  padding:0;
}
.epw-nav a{
  color:var(--emp-type-2);
  text-decoration:none;
  font-size:var(--emp-fs-1);
  padding:var(--emp-sp-1) 0;
  border-bottom:2px solid transparent;
  transition:border-color var(--emp-motion-fast) ease,color var(--emp-motion-fast) ease;
}
.epw-nav a:hover,.epw-nav a[aria-current="page"]{
  color:var(--emp-mark);
  border-bottom-color:var(--emp-mark);
}

/* ---- footer ---- */
.epw-foot{
  background:var(--emp-base-2);
  border-top:1px solid var(--emp-line);
  margin-top:var(--emp-sp-5);
}
.epw-foot-frame{
  max-width:1067px;
  margin:0 auto;
  padding:var(--emp-sp-4) var(--emp-sp-2);
  display:flex;
  flex-wrap:wrap;
  gap:var(--emp-sp-3);
  justify-content:space-between;
}
.epw-foot-col{flex:1 1 30%;min-width:0;}
.epw-foot-col h4{font-size:var(--emp-fs-2);color:var(--emp-type-2);}
.epw-foot-col ul{list-style:none;padding:0;margin:0;}
.epw-foot-col a{color:var(--emp-type-2);text-decoration:none;font-size:var(--emp-fs-1);}
.epw-foot-col a:hover{color:var(--emp-mark);}
.epw-foot-note{
  border-top:1px solid var(--emp-line);
  padding:var(--emp-sp-2);
  text-align:center;
  color:var(--emp-type-2);
  font-size:var(--emp-fs-1);
}

/* ---- main / article ---- */
.epw-main{
  padding:var(--emp-sp-4) 0 var(--emp-sp-5) 0;
  animation:epw-rise var(--emp-motion-slow) ease-out;
}
.epw-breadcrumb{
  font-size:var(--emp-fs-1);
  color:var(--emp-type-2);
  margin-bottom:var(--emp-sp-3);
}
.epw-breadcrumb a{color:var(--emp-type-2);text-decoration:none;}
.epw-breadcrumb a:hover{color:var(--emp-mark);}
.epw-breadcrumb span{margin:0 var(--emp-sp-1);}

.epw-article-head{margin-bottom:var(--emp-sp-3);}
.epw-byline{
  display:flex;
  flex-wrap:wrap;
  gap:var(--emp-sp-2);
  align-items:center;
  color:var(--emp-type-2);
  font-size:var(--emp-fs-1);
  margin-bottom:var(--emp-sp-3);
}
.epw-byline a{color:var(--emp-mark-2);text-decoration:none;}
.epw-byline a:hover{color:var(--emp-mark);}

.epw-figure{margin:0 0 var(--emp-sp-3) 0;}
.epw-figure img{
  width:100%;
  border-radius:var(--emp-radius-round);
  border:1px solid var(--emp-line);
}
.epw-figcaption{
  font-size:var(--emp-fs-1);
  color:var(--emp-type-2);
  margin-top:var(--emp-sp-1);
}

.epw-prose{max-width:100%;}
.epw-prose h2{margin-top:var(--emp-sp-4);}
.epw-prose h3{margin-top:var(--emp-sp-3);}

.epw-callout{
  background:var(--emp-surface);
  border:1px solid var(--emp-line);
  border-left:2px solid var(--emp-mark);
  border-radius:var(--emp-radius-flat);
  padding:var(--emp-sp-2) var(--emp-sp-3);
  margin:var(--emp-sp-3) 0;
}
.epw-callout p:last-child{margin-bottom:0;}

.epw-faq{margin:var(--emp-sp-4) 0;}
.epw-faq-item{
  border-bottom:1px solid var(--emp-line);
  padding:var(--emp-sp-2) 0;
}
.epw-faq-item h3{
  font-size:var(--emp-fs-3);
  margin-bottom:var(--emp-sp-1);
  color:var(--emp-mark);
}

/* ---- teaser lists (hub children, latest posts, related) ---- */
.epw-teaser-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--emp-sp-2);
}
.epw-teaser{
  background:var(--emp-surface);
  border:1px solid var(--emp-line);
  border-radius:var(--emp-radius-flat);
  padding:var(--emp-sp-2);
  transition:border-color var(--emp-motion-fast) ease;
}
.epw-teaser:hover{border-color:var(--emp-mark);}
.epw-teaser a{
  color:var(--emp-type);
  text-decoration:none;
  font-family:var(--emp-font-head);
  font-weight:600;
  font-size:var(--emp-fs-2);
}
.epw-teaser a:hover{color:var(--emp-mark);}
.epw-teaser-meta{
  color:var(--emp-type-2);
  font-size:var(--emp-fs-1);
  margin-top:var(--emp-sp-1);
}
.epw-teaser-desc{
  color:var(--emp-type-2);
  font-size:var(--emp-fs-1);
  margin-top:var(--emp-sp-1);
}

/* ---- hub head ---- */
.epw-hub-head{margin-bottom:var(--emp-sp-4);}
.epw-hub-head h1{margin-bottom:var(--emp-sp-2);}

/* ---- writers grid on /profile/ ---- */
.epw-writers-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--emp-sp-2);
  margin:var(--emp-sp-3) 0;
}
.epw-writer-tile{
  background:var(--emp-surface);
  border:1px solid var(--emp-line);
  border-radius:var(--emp-radius-flat);
  padding:var(--emp-sp-2);
}
.epw-writer-tile a{color:var(--emp-mark-2);text-decoration:none;font-weight:600;}
.epw-writer-tile a:hover{color:var(--emp-mark);}

/* ---- home hero + latest nav ---- */
.epw-lead{
  padding:var(--emp-sp-4) 0;
}
.epw-lead h1{margin-bottom:var(--emp-sp-2);}
.epw-hub-links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--emp-sp-2);
  margin:var(--emp-sp-3) 0 var(--emp-sp-4) 0;
}
.epw-hub-links a{
  display:inline-block;
  background:var(--emp-surface);
  border:1px solid var(--emp-line);
  color:var(--emp-type);
  text-decoration:none;
  padding:var(--emp-sp-1) var(--emp-sp-2);
  border-radius:var(--emp-radius-flat);
  font-size:var(--emp-fs-1);
  transition:border-color var(--emp-motion-fast) ease,color var(--emp-motion-fast) ease;
}
.epw-hub-links a:hover{border-color:var(--emp-mark);color:var(--emp-mark);}

.epw-latest{
  margin:var(--emp-sp-4) 0;
  animation:epw-veil var(--emp-motion-slow) ease-out;
}
.epw-latest h2{font-size:var(--emp-fs-4);margin-bottom:var(--emp-sp-2);}
.epw-latest-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--emp-sp-1);
}
.epw-latest-list li{
  display:flex;
  flex-wrap:wrap;
  gap:var(--emp-sp-2);
  align-items:baseline;
  border-bottom:1px solid var(--emp-line);
  padding:var(--emp-sp-1) 0;
  margin-bottom:0;
}
.epw-latest-list a{color:var(--emp-type);text-decoration:none;}
.epw-latest-list a:hover{color:var(--emp-mark);}
.epw-latest-date{color:var(--emp-type-2);font-size:var(--emp-fs-1);}
.epw-latest-silo{color:var(--emp-mark-2);font-size:var(--emp-fs-1);}

/* ---- trust page ---- */
.epw-trust-block{margin-bottom:var(--emp-sp-4);}

/* ---- keyframes (max 2, per contract) ---- */
@keyframes epw-rise{
  from{opacity:0;transform:translateY(var(--emp-sp-1));}
  to{opacity:1;transform:translateY(0);}
}
@keyframes epw-veil{
  from{opacity:0;}
  to{opacity:1;}
}

/* ---- responsive ---- */
@media (max-width:521px){
  .epw-head-frame{padding:var(--emp-sp-1) var(--emp-sp-2);}
  h1{font-size:var(--emp-fs-5);}
  h2{font-size:var(--emp-fs-4);}
}
@media (min-width:841px){
  .epw-teaser-list{grid-template-columns:1fr 1fr;}
  .epw-writers-grid{grid-template-columns:1fr 1fr 1fr;}
}
@media (min-width:1249px){
  .epw-teaser-list{grid-template-columns:1fr 1fr 1fr;}
}