*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg: #F7EEFF;         /* page background */
    --surface: #F9F3FF;    /* cards */
    --surface-2: #FFF8CC;  /* lighter cards */
    --border: #D1B5DC;     /* subtle border */
    --text: #222222;
    --muted: #666666;
    --heading-clr: #732494;
}

html{
    scroll-behavior: smooth;
}




  /* Header Styles */

    header {
      display: flex;
      justify-content: space-between;
      align-items: center; 
      padding: 10px 5%;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
   
       
    }

    
 header.scrolled {
      background-color:#F7EEFF;
    }
header.active {
  background-color: #732494; /* Background color when logo.svg is clicked */
}

    header .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }

    header .nav-trigger img,
    header .nav-trigger .close-icon {
      width: 70px;
      cursor: pointer;
    }

    header .nav-trigger .close-icon {
      font-size: 5rem;
      display: none;
      color: #fff;
    }
 
   
    /* Full-Page Navigation */
    .nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #732494;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      transform: translateY(-100%);
      transition: transform 0.3s ease-in-out;
      padding-left: 10%;
      padding-top: 50px;
       z-index: 900;
    }

    .nav-overlay.active {
      transform: translateY(0);
    }

    .nav-overlay .nav-header {
      position: absolute;
      top: 20px;
      left: 10%;
      font-size: 1.5rem;
      font-weight: bold;
    }

    .nav-overlay ul {
      list-style: none;
      text-align: left;
      width: 100%;
    }

    .nav-overlay ul li {
      margin: 20px 0;
    }

    .nav-overlay ul li a {
      font-size: 3.5vw;
      font-family: "unbounded", sans-serif;
      text-transform: uppercase;
      font-weight: 700;
      line-height: 2vw;
      color: #fff;
      text-decoration: none;
      transition: color 0.3s;
    }

    .nav-overlay ul li a:hover {
      color: #000;
    }

h1,
article h2{
    scroll-margin-top: 120px;
}

.red 
{color:#732494;}

/* ==========================
   ARTICLE LINKS
   ========================== */

article a{
    color:#732494;
    text-decoration:none;

    font-weight:600;

    border-bottom:2px solid rgba(183,0,0,0.25);

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease;
}

article a:hover{
    color:#7D0000;

    border-bottom-color:#7D0000;

    background:rgba(183,0,0,0.08);
}



article a:focus-visible{
    outline:2px solid #732494;
    outline-offset:3px;
    border-radius:2px;
}










body{
    font-family: Inter, serif;
    line-height:1.6;
    color:#333;
    font-size:16px;
    background-color: var(--bg);
}

.post-link,
.card,
.author-box{
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,0.08);
     transition: background-color 0.2s ease;
}

.author-box p 
{margin-bottom: 1rem;}

.card{
    display:block;
    text-decoration:none;
    color:inherit;
}

.card h4, .post-link h4{
    transition: color 0.2s ease;
}



.card:hover h4, 

.post-link:hover h4{
    color: #732494;
}

.post-link:hover,
.card:hover
{
    background: rgba(255,255,255,0.65);
    
}

h2
{font-size: 1.6rem;}


h1,
h2,
h3,
h4,
h5,
h6{
    font-family: "unbounded", sans-serif;
    font-weight: 600;
    line-height: 1.2;
}
.container{
    max-width:800px;
    margin:60px auto auto auto;
    padding:2rem 1rem;
}

.hero{
    width:100%;
    height:300px;
    background:#ddd;
    border-radius:12px;
    margin-bottom:40px;
    overflow: hidden;
}

.hero img{
    width:100%;
    height:100%;
    object-fit:cover;

}


.meta{
    display:flex;
    gap:20px;
    flex-wrap:wrap;

    font-family: Inter, sans-serif;
    font-size:0.75rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.12em;

    color:#666;
    margin-bottom:16px;
}

h1{
    font-size:2rem;
    line-height:1.2;
    margin-bottom:20px;
    color: var(--heading-clr);
}

.intro{
    font-size:1.2rem;
    color:#333;
    margin-bottom:40px;
}

article p, ul{
    margin-bottom:.7rem;
    font-size: .9rem;
}
article ul,
article ol{
    margin: 1.5rem 0;
    padding-left: 2.5rem;
}

article li{
    margin-bottom: 0.2rem;
}
article h2{
    margin:32px 0 16px;
}

blockquote{
    border-left:4px solid #000;
    padding-left:20px;
    margin:40px 0;
    font-size:1.4rem;
    font-style:italic;
}

.inline-image{
    width:100%;
   overflow: hidden;

    border-radius:12px;
    margin:40px 0;

}

.inline-image img{
    width:100%;
   object-fit:cover;
   display:block;

}

.tags{
    margin-top:50px;

    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.tag{
    padding:6px 12px;

    background:rgba(255,255,255,0.45);
    border:1px solid rgba(0,0,0,0.08);

    color:#222;

    border-radius:20px;
    font-size:14px;
}

.author-box{
    margin-top:60px;
    padding:30px;
   
    border-radius:12px;
}

.author-box h3{
    margin-bottom:10px;
}

.post-nav{
    margin-top:60px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.post-link{
    
    padding:24px;
    border-radius:12px;
}

.post-link small{
    color:#888;
}

.related{
    margin-top:80px;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:20px;
}

.card{

    border-radius:12px;
    overflow:hidden;
}

.card-image{
    height:150px;
    background:#ddd;
}
.card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content{
    padding:20px;
}
.card-content h4
{font-size: .85rem;}


footer{
    margin-top:100px;
    text-align:center;
    color:#999;
    font-size:14px;}

.post-link,
.card,
.author-box{
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,0.08);
}





/* ==========================
   ARTICLE SECTION NAVIGATION
   ========================== */

#article-nav{
    position:fixed;
    left:2rem;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
}

#article-nav-list{
    list-style:none;
    padding:0;
    margin:0;
}

#article-nav-list li{
    position:relative;
    margin:0 0;
}

/* DOT */

#article-nav-list a{
    display:flex;
    align-items:center;
    text-decoration:none;
}

#article-nav-list .dot{
    width:6px;
    height:28px;
    background:#999;

    background:#D4BCDE;
    transition:all 0.2s ease;
}

/* ACTIVE */

#article-nav-list li.active .dot{
    background:#732494;
   
}

/* LABEL */

#article-nav-list .label{
    width:250px;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    margin-left:0.75rem;

    font-family: Inter, sans-serif;
    font-size:0.75rem;
    font-weight:500;

    text-transform:uppercase;
    letter-spacing:0.12em;

    color:#222;

    opacity:0;
    transform:translateX(-8px);

    transition:all 0.2s ease;
    pointer-events:none;
}

/* SHOW LABELS ON HOVER */

#article-nav:hover .label{
    opacity:1;
    transform:translateX(0);
}

/* ACTIVE LABEL */

#article-nav-list li.active .label{
    color:#732494;
}

/* MOBILE */

@media (max-width: 1024px){
    #article-nav{
        display:none;
    }
}


.post-nav{
    margin-top:60px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.post-link{
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(4px);
    border:1px solid rgba(0,0,0,0.08);
    border-radius:12px;
    overflow:hidden;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.post-link:hover{
    background: rgba(255,255,255,0.65);
    transform:translateY(-2px);
}

.post-link h4
{font-size: .85rem;}

.post-link:hover h4{
    color:#732494;
   
}

.post-link-image{
    height:180px;
    overflow:hidden;
}

.post-link-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.post-link-content{
    padding:24px;
}

.post-link small{
    display:block;

    font-family: Inter, sans-serif;
    font-size:0.75rem;
    font-weight:500;

    text-transform:uppercase;
    letter-spacing:0.12em;

    color:#666;
    margin-bottom:12px;
}

.post-link h4{
    transition:color 0.2s ease;
}




.post-link {

    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.post-link:hover {
    text-decoration: none;
}

/* ==========================
   ARTICLE TABLES
   ========================== */

article table{
    width:100%;
    margin:2rem 0;
    border-collapse:collapse;

    background:rgba(255,255,255,0.45);
    backdrop-filter:blur(4px);

    border:1px solid rgba(0,0,0,0.08);
    border-radius:12px;
    overflow:hidden;

    font-size:1rem;
}

article thead{
    background:rgba(183,0,0,0.08);
}

article th{
    font-family: Inter, sans-serif;
    font-size:0.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;

    color:#732494;
    text-align:left;

    padding:1rem;
    border-bottom:2px solid rgba(183,0,0,0.15);
}

article td{
    padding:1rem;
    vertical-align:top;
    border-bottom:1px solid rgba(0,0,0,0.08);
}

article tbody tr:last-child td{
    border-bottom:none;
}

/* Subtle row separation */

article tbody tr:nth-child(even){
    background:rgba(255,255,255,0.15);
}

/* Hover effect */

article tbody tr:hover{
    background:rgba(255,255,255,0.35);
}

/* Mobile scrolling */

.table-wrapper{
    overflow-x:auto;
    margin:2rem 0;
}

.table-wrapper table{
    margin:0;
    min-width:600px;
}
.impact-high{
    color:#0A7A32;
    font-weight:600;
}

.impact-moderate{
    color:#8A6D00;
    font-weight:600;
}

.impact-low{
    color:#732494;
    font-weight:600;
}

.impact-very-low{
    color:#666;
    font-weight:600;
}

@media (max-width:768px){

    .related-grid{
        grid-template-columns:1fr;
    }

}

@media (max-width:768px){

    .post-link-image{
        display:none;
    }

    .post-link-content{
        padding:0;
    }

    .post-nav{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

}

.floating-blog-home{
    position:fixed;
    left:5%;
    top:135px;

    padding:10px 16px;

    background:rgba(255,255,255,0.40);
    backdrop-filter:blur(4px);

    border:1px solid rgba(0,0,0,0.08);
    border-radius:999px;

    text-decoration:none;
    color:#222;

    font-family:"unbounded", sans-serif;
    font-size:0.8rem;
    font-weight:600;

    z-index:100;
}

.floating-blog-home:hover{
    color:#732494;
}

@media (max-width:768px){

 .nav-overlay ul li a {
      font-size: 5vw;
      
      line-height: 1vw;
   
    }

 .nav-overlay ul li {
      margin: 4px 0;
    }


    .floating-blog-home{
        position:fixed;

        left:50%;
        transform:translateX(-50%);

        top:25px;

        width:auto;          /* important */
        max-width:none;      /* important */

        display:inline-flex; /* important */

        padding:10px 16px;

        background:#fff;
        border:1px solid rgba(0,0,0,0.1);
        border-radius:999px;

        font-size:0.75rem;
        line-height:1;

        white-space:nowrap;

        z-index:1002;
        height: 35px;
    }

}

.image-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin:40px 0;
}

.image-grid-item{
    overflow:hidden;
    border-radius:12px;
}

.image-grid-item img{
    width:100%;
    display:block;
}

@media (max-width:768px){

    .image-grid{
        grid-template-columns:1fr;
    }

}

.image-grid-item figcaption{
    margin-top:10px;
 margin-bottom:20px;
    font-family: Inter, sans-serif;
    font-size:0.85rem;
    line-height:1.5;

    color:#666;

    text-align:left;
}

.tags .tag{
    display:inline-flex;
    align-items:center;

    padding:6px 12px;

    background:rgba(255,255,255,0.45);
    border:1px solid rgba(0,0,0,0.08);
    border-radius:999px;

    color:#222;
    text-decoration:none;

    font-family:Inter, sans-serif;
    font-size:0.8rem;
    font-weight:500;

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease;
}

.tags .tag:hover{
    color:#732494;
    border-color:rgba(183,0,0,0.25);
    background:rgba(255,255,255,0.55);
}

.tags .tag:focus-visible{
    outline:2px solid #732494;
    outline-offset:3px;
}

/* ===========================
   BLOG TOOLBAR
=========================== */

.blog-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:32px;

    margin:12px 0 10px;

}

.categories{

    display:flex;

    align-items:center;

}

.search-form{

    width:480px;

    max-width:100%;

    margin:0;

}

.search-form input{

    width:100%;

    padding:10px 12px;

    border:1px solid var(--border);

    border-radius:9999px;

    background:var(--surface);

    color:var(--text);
font-family:"inter", sans-serif;
font-size:0.85rem;
font-weight: 500;
    transition:.2s;

}

.search-form input::placeholder{

    color:var(--muted);

}

.search-form input:focus{

    outline:none;

    border-color:var(--accent);

    background:#fff;

    box-shadow:0 0 0 3px rgba(255,212,0,.18);

}





/* ===================================
   TOPICS PANEL
=================================== */

.topics-button{


    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

padding:8px 16px;

background:rgba(255,255,255,0.35);
backdrop-filter:blur(4px);
border:1px solid rgba(0,0,0,0.08);
color:#222;

border-radius:999px;

text-decoration:none;

font-family:"unbounded", sans-serif;
font-size:0.8rem;
font-weight:600;

}

.topics-button:hover{

background:#732494;
color:#fff;

}

#browse-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:80;

}

#browse-overlay.visible{

    opacity:1;

    visibility:visible;

}

#browse-panel{

    position:fixed;

    top:0;

right:0;

transform:translateX(100%);

    width:440px;

    max-width:100%;

    height:100vh;

    background:var(--bg);

    padding:40px;

    overflow-y:auto;

    transition:transform .3s ease;

    z-index:1100;

    box-shadow:
        -8px 0 30px rgba(0,0,0,.15);

}

#browse-panel.open{

    transform:translateX(0);

}

.browse-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:32px;

}

.browse-header h2{

    margin:0;

}

#browse-close{

    background:none;

    border:none;

    font-size:2rem;

    cursor:pointer;

    color:var(--text);

}

#browse-search-form{

    margin-bottom:40px;

}

#topics-list{

    display:flex;

    flex-direction:column;

}

.topic-item{

    display:block;

    padding:18px 0;

    text-decoration:none;

    color:inherit;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.topic-item:hover{

    color:#732494;

}

.topic-item h3{

    margin-bottom:6px;

}

.topic-item p{

    margin:0;

    color:#666;

    font-size:.95rem;

}

@media(max-width:768px){

    #browse-panel{

        width:100%;
        max-width:100%;
        padding:28px;
        z-index:1100;

    }

}


/* -------------------------
BUTTONS
------------------------- */

.back-btn{

display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

padding:8px 16px;

background:rgba(255,255,255,0.10);
backdrop-filter:blur(4px);
border:1px solid rgba(0,0,0,0.02);
color:#222;

border-radius:999px;

text-decoration:none;

font-family:"inter", sans-serif;
font-size:0.8rem;
font-weight:600;


}
.back-btn .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
}
.back-btn:hover{


background:#732494;
color:#fff;

}















.search-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1.2rem;
}


.browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding:8px 16px;

background:rgba(255,255,255,0.35);
backdrop-filter:blur(4px);
border:1px solid rgba(0,0,0,0.08);
color:#222;

border-radius:999px;

text-decoration:none;

font-family:"inter", sans-serif;
font-size:0.8rem;
font-weight:600;
}

.browse-btn:hover {
  background:#732494;
color:#fff;
}

.blog-search-input {
    width: 600px;      /* Set whatever width you like */
    max-width: 50%;

    padding: 14px 18px;

    border: 1px solid #E5CF5A;
    border-radius: 999px;

    background: #FFF8CC;
    font-size: 16px;
}

.image-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin:40px 0 0 0;
}

.article-summary-note {
    background: rgba(255, 255, 255, 0.5);

    padding:1rem;
    border-radius: 12px;
}









.archive-header{
    display:flex;
    justify-content:space-between;
    align-items:center;      /* was flex-end */
    gap:3rem;
    margin-bottom:3rem;
}

.archive-header h1{
    margin:0;
}

.archive-nav{
    display:flex;
    align-items:center;
    gap:2.5rem;
    font-family: unbounded;
}

.archive-nav a{
    font-size:1.4rem;        /* Bigger links */
    font-weight:500;
    text-decoration:none;
    color:#222;
    white-space:nowrap;
}

.archive-nav a:hover{
    text-decoration:underline;
}

.archive-nav a.disabled{
    opacity:.35;
    pointer-events:none;
}

@media (max-width: 768px){

    .archive-header{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:1.5rem;
        margin-bottom:2rem;
    }

    .archive-header h1{
        font-size:3.5rem;      /* Smaller heading */
        line-height:.95;
    }

    .archive-nav{
        width:100%;
        display:flex;
        flex-direction:row;     /* Navigation stays on one row */
        justify-content:space-between;
        align-items:center;
        gap:1rem;
    }

    .archive-nav a{
        font-size:1.2rem;       /* Smaller nav */
    }
}