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

:root{
    --bg: #FFE714;          /* page background */
    --surface: #FFF3A3;    /* cards */
    --surface-2: #FFF8CC;  /* lighter cards */
    --border: #E6D000;     /* subtle border */
    --text: #222222;
    --muted: #666666;
}

 @font-face {
      font-family: "ClashDisplay";
      src: url("ClashDisplay-Variable.ttf") format("truetype");
      font-weight: 100 700;
      font-style: normal;
    }

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;
         transform: translateZ(0);
       
    }

    
 header.scrolled {
      background-color:#FFE714;
    }
header.active {
  background-color: #B70000; /* 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: #B70000;
      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: 999;
    }

    .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: "ClashDisplay", 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;
}













body{
    font-family: Lora, 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: #B70000;
}

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

h2
{font-size: 2rem;}


h1,
h2,
h3,
h4,
h5,
h6{
    font-family: "ClashDisplay", sans-serif;
    font-weight: 600;
    line-height: 1.2;
}
.container{
    max-width:800px;
    margin:100px 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:3rem;
    line-height:1.2;
    margin-bottom:20px;
}

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

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

article li{
    margin-bottom: 0.2rem;
}
article h2{
    margin:48px 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-content{
    padding:20px;
}

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:1000;
}

#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:#D8C310;
    transition:all 0.2s ease;
}

/* ACTIVE */

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

/* 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:#B70000;
}

/* 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:hover h4{
    color:#B70000;
}

.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:#B70000;
    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:#B70000;
    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:Inter,sans-serif;
    font-size:0.8rem;
    font-weight:600;

    z-index:1000;
}

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

@media (max-width:768px){

    .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:1000;
        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;
}