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

body {
  font-family: 'Kalpurush', 'LiPurnoPran', 'Noto Serif Bengali', serif;
  background-color: #e1e1e1;
}



/* =================================
   Short Stories Genre Pages
================================= */

.genre-hero,
.popular-stories,
.all-stories {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}


/* ================================
   Hero
================================ */

.genre-hero {
    text-align: center;
    padding: 80px 16px 56px;
}

.genre-hero h1 {
    margin: 0 0 12px;
    font-size: 2rem;
    line-height: 1.3;
}

.genre-hero p {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
    font-size: 18px;
}


/* ================================
   Section Titles
================================ */

.popular-stories h2,
.all-stories h2 {
    margin-bottom: 24px;
    font-size: 21px;
    background: #ffffff;
    padding: 14px 20px;
    border-left: 6px solid #076300;
    border-radius: 8px;
}


/* ================================
   Popular Story Grid
================================ */

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


/* ================================
   Story Card
================================ */

.story-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}

.story-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.story-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.story-content h3 {
    margin: 0;
    font-size: 1.4rem;
}

.story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.story-tags span {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 20px;
    background: #f4f4f4;
}

.story-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}


/* ================================
   All Story List
================================ */

.story-list {
    margin: 0;
    padding-left: 60px;
    column-count: 3;
    column-gap: 40px;
}

.story-list li {
    margin-bottom: 12px;
    line-height: 1.8;
    break-inside: avoid;
}

.story-list li::marker {
    font-size: 20px;
}

.story-list a {
    text-decoration: none;
    color: inherit;
    font-size: 20px;
}


/* ================================
   Tablet
================================ */

@media (max-width: 999px) and (min-width: 600px) {

    .story-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .story-list {
        column-count: 2;
    }

    .popular-stories h2,
    .all-stories h2 {
        font-size: 18px;
    }

    .genre-hero p,
    .story-list a {
        font-size: 19px;
    }

}


/* ================================
   Mobile
================================ */

@media (max-width: 599px) {

    .genre-hero h1 {
        font-size: 1.6rem;
    }

    .story-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .story-content {
        padding: 10px;
    }

    .story-content h3 {
        font-size: 0.95rem;
    }

    .story-tags span {
        font-size: 0.75rem;
    }

    .story-list {
        column-count: 1;
    }

    .popular-stories h2,
    .all-stories h2 {
        font-size: 16px;
    }

    .genre-hero p {
        line-height: 1.4;
        font-size: 15px;
    }
    .story-list a {
        font-size: 16px;
    }

}


/* =========================================
   Information Section
========================================= */

.info-section{
    max-width:1200px;
    margin:0 auto;
    padding:24px 16px;
}

.info-section article{
    background:#ffffff;
    border:1px solid #e6e6e6;
    border-radius:14px;
    padding:32px;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}


/* =========================================
   Heading
========================================= */

.info-section h2{
    font-size:30px;
    line-height:1.35;
    color:#0b5f17;
    margin-bottom:22px;
    padding-bottom:12px;
    border-bottom:3px solid #0b5f17;
}

.info-section h3{
    font-size:23px;
    margin:28px 0 12px;
    color:#202020;
}


/* =========================================
   Paragraph
========================================= */

.info-section p{
    font-size:20px;
    line-height:1.95;
    text-align:justify;
    margin-bottom:20px;
    color:#333;
}


/* =========================================
   List
========================================= */

.info-section ul{
    margin:20px 0;
    padding-left:32px;
}

.info-section li{
    font-size:20px;
    line-height:1.9;
    margin-bottom:12px;
    color:#333;
}


/* =========================================
   FAQ
========================================= */

.faq-section .faq-item{
    margin-top:26px;
    padding:20px 22px;
    border-radius:12px;
    background:#f8f8f8;
    border-left:5px solid #0b5f17;
}

.faq-section .faq-item:first-child{
    margin-top:0;
}

.faq-section h3{
    margin:0 0 12px;
    font-size:22px;
    color:#0b5f17;
}

.faq-section p{
    margin:0;
}


/* =========================================
   Text Selection
========================================= */

.info-section ::selection{
    background:#0b5f17;
    color:#fff;
}


/* =========================================
   Tablet
========================================= */

@media (max-width:999px){

    .info-section article{
        padding:26px;
    }

    .info-section h2{
        font-size:25px;
    }

    .info-section h3{
        font-size:21px;
    }

    .info-section p,
    .info-section li{
        font-size:19px;
        line-height:1.85;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width:599px){

    .info-section{
        padding:18px 12px;
    }

    .info-section article{
        padding:20px 18px;
        border-radius:12px;
    }

    .info-section h2{
        font-size:22px;
        margin-bottom:18px;
    }

    .info-section h3{
        font-size:19px;
        margin:22px 0 10px;
    }

    .info-section p,
    .info-section li{
        font-size:17px;
        line-height:1.8;
        text-align:left;
    }

    .info-section ul{
        padding-left:24px;
    }

    .faq-section .faq-item{
        padding:16px;
    }

}