.stories-page {
    background: #fdfbf7;
}

.stories-hero {
    min-height: 620px;
    position: relative;
    overflow: hidden;
    padding: 180px 0 150px;
    background: linear-gradient(135deg, #e9f3d8 0%, #fff5db 55%, #f8dfe2 100%);
}

.stories-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: radial-gradient(#3f7f4f 1px, transparent 1px);
    background-size: 26px 26px;
}

.stories-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 820px;
}

.stories-hero .header-badge,
.stories-intro .header-badge {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #3f7f4f;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.stories-hero h1 {
    margin: 1.2rem 0;
    font-size: clamp(3.2rem, 8vw, 6.3rem);
    line-height: 1.02;
    color: #3f3f3f;
}

.stories-hero h1 span {
    color: #3f7f4f;
}

.stories-hero p {
    max-width: 610px;
    margin: 0 auto;
    color: #5c6659;
    font-size: 1.2rem;
}

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2rem;
}

.story-scroll-link {
    display: inline-flex;
    gap: .7rem;
    align-items: center;
    margin-top: 0;
    padding: .8rem 1.3rem;
    border-radius: 999px;
    color: #fff;
    background: #3f7f4f;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(63, 127, 79, .2);
    transition: transform .25s ease;
}

.story-scroll-link:hover {
    transform: translateY(-3px);
}

.story-scroll-link span {
    font-size: 1.3rem;
}

.hero-orbit,
.hero-ribbon {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.hero-orbit {
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border: 2px dashed rgba(63, 127, 79, .45);
    border-radius: 50%;
    color: #3f7f4f;
    font-size: 2rem;
    animation: hero-float 4s ease-in-out infinite;
}

.orbit-left {
    left: 14%;
    top: 38%;
}

.orbit-right {
    right: 13%;
    bottom: 28%;
    animation-delay: -2s;
}

.hero-ribbon {
    right: 7%;
    top: 45%;
    padding: .65rem 1rem;
    color: #fff;
    background: #ff9e91;
    border-radius: 8px;
    font-family: 'Playpen Sans', cursive;
    font-size: .9rem;
    font-weight: 700;
    transform: rotate(8deg);
    box-shadow: 0 8px 18px rgba(255, 158, 145, .28);
}

@keyframes hero-float {

    0%,
    100% {
        transform: translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateY(-12px) rotate(8deg);
    }
}

.stories-sun {
    position: absolute;
    width: 180px;
    height: 180px;
    right: 12%;
    top: 100px;
    border-radius: 50%;
    background: #f7c95b;
    opacity: .55;
    box-shadow: 0 0 0 24px rgba(247, 201, 91, .12);
}

.stories-cloud {
    position: absolute;
    color: #fff;
    opacity: .65;
    font-size: 7rem;
    line-height: 1;
}

.cloud-one {
    left: 8%;
    top: 150px;
}

.cloud-two {
    right: 28%;
    bottom: 110px;
    font-size: 4rem;
}

.wave-divider {
    position: absolute;
    height: 100px;
    width: 110%;
    left: -5%;
    bottom: -55px;
    background: #fdfbf7;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.story-video-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.3rem;
    border: 1px solid rgba(63, 127, 79, .35);
    border-radius: 999px;
    color: #3f7f4f;
    background: rgba(255, 255, 255, .62);
    text-decoration: none;
    font-weight: 700;
    transition: transform .25s ease, background .25s ease;
}

.story-video-link:hover {
    transform: translateY(-3px);
    background: #fff;
}

.video-spotlight {
    padding: 6rem 0 5rem;
    background: #fff;
}

.video-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.video-copy h2 {
    margin: 1rem 0;
    color: #3f3f3f;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.1;
}

.video-copy h2 span {
    color: #3f7f4f;
}

.video-copy>p {
    color: #625e5a;
    font-size: 1.08rem;
    line-height: 1.8;
}

.video-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 2rem;
}

.video-stats div {
    display: grid;
    gap: .2rem;
    min-width: 92px;
}

.video-stats strong {
    color: #3f7f4f;
    font-size: 1.7rem;
}

.video-stats span {
    color: #8b8580;
    font-size: .8rem;
}

.video-frame-wrap {
    max-width: 430px;
    width: 100%;
    margin: 0 auto;
    padding: 12px;
    border-radius: 30px;
    background: linear-gradient(145deg, #9bb46b, #f8d5d1 55%, #b6d8f2);
    box-shadow: 0 22px 55px rgba(63, 63, 63, .16);
    transform: rotate(2deg);
}

.video-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    border-radius: 20px;
    background: #202a22;
}

.video-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-open-link {
    display: flex;
    justify-content: space-between;
    padding: .8rem .4rem .1rem;
    color: #3f3f3f;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 700;
    transform: rotate(-2deg);
}

.story-takeaways {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 1120px;
    margin: 3rem auto 0;
}

.takeaway-card {
    padding: 1.5rem;
    border: 1px solid rgba(155, 180, 107, .2);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(63, 63, 63, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.takeaway-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 35px rgba(63, 63, 63, .12);
}

.takeaway-card>span {
    font-size: 1.8rem;
}

.takeaway-card h4 {
    margin: .8rem 0 .35rem;
    color: #3f7f4f;
    font-size: 1.05rem;
}

.takeaway-card p {
    margin: 0;
    color: #7d7570;
    font-size: .9rem;
    line-height: 1.5;
}

.stories-content {
    padding: 5rem 0 6rem;
}

.stories-intro {
    text-align: center;
    margin-bottom: 2.8rem;
}

.stories-intro h2 {
    margin: .7rem 0 .3rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
    color: #3f7f4f;
}

.stories-intro p {
    color: #7d7570;
    font-size: 1.05rem;
}

.story-card {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(155, 180, 107, .2);
    border-radius: 28px;
    box-shadow: 0 20px 55px rgba(63, 63, 63, .1);
}

.story-art {
    min-height: 530px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(#b6d8f2 0 57%, #8abca0 57%);
}

.art-sun {
    position: absolute;
    top: 45px;
    right: 45px;
    font-size: 4.5rem;
    color: #f8ce63;
}

.art-hill {
    position: absolute;
    bottom: 40%;
    width: 125%;
    height: 170px;
    border-radius: 50% 50% 0 0;
    transform: rotate(-8deg);
}

.hill-back {
    left: -35%;
    background: #9bb46b;
}

.hill-front {
    left: 35%;
    bottom: 34%;
    background: #6e9a70;
}

.art-water {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 43%;
    background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, .3) 24px 26px), #82b9c5;
}

.art-raft {
    position: absolute;
    left: 27%;
    bottom: 28%;
    color: #754e32;
    font-size: 7rem;
    transform: rotate(-12deg);
    text-shadow: inset 0 0 0 10px #b77d4d;
}

.art-child {
    position: absolute;
    left: 37%;
    bottom: 39%;
    font-size: 3rem;
    transform: rotate(-8deg);
}

.art-school {
    position: absolute;
    right: 13%;
    top: 33%;
    font-size: 4.5rem;
}

.art-caption {
    position: absolute;
    bottom: 22px;
    left: 22px;
    color: #fff;
    font-family: 'Playpen Sans', cursive;
    font-size: .9rem;
    font-weight: 600;
}

.story-copy {
    padding: clamp(2rem, 5vw, 4.5rem);
}

.story-meta {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: #9bb46b;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.story-copy h3 {
    margin: 1.3rem 0 1.4rem;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.2;
    color: #3f3f3f;
}

.story-copy p {
    margin-bottom: 1.1rem;
    color: #625e5a;
    font-size: 1.05rem;
    line-height: 1.85;
}

.story-highlight {
    display: flex;
    gap: .9rem;
    align-items: center;
    margin-top: 1.8rem;
    padding: 1rem 1.2rem;
    border-left: 4px solid #ffb7b2;
    background: #fff4f0;
    border-radius: 0 14px 14px 0;
}

.story-highlight p {
    margin: 0;
    color: #3f7f4f;
    font-family: 'Playpen Sans', cursive;
    font-weight: 700;
    line-height: 1.4;
}

.quote-mark {
    color: #ffb7b2;
    font-size: 3rem;
    line-height: .7;
}

.stories-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 680px;
    margin: 3.5rem auto 0;
    color: #7d7570;
    text-align: center;
}

.stories-footer-note span {
    color: #9bb46b;
    font-size: 1.5rem;
}

.stories-footer {
    padding: 3rem 1rem;
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
    color: #999;
}

@media (max-width: 1100px) {
    .stories-page .navbar {
        padding-left: 4%;
        padding-right: 4%;
    }

    .stories-page .nav-links {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .hero-orbit {
        width: 54px;
        height: 54px;
        font-size: 1.4rem;
    }

    .orbit-left {
        left: 5%;
        top: 25%;
    }

    .orbit-right {
        right: 4%;
        bottom: 22%;
    }

    .hero-ribbon {
        right: 4%;
        top: 16%;
        font-size: .72rem;
    }

    .video-spotlight {
        padding: 4rem 1rem;
    }

    .video-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .video-copy {
        text-align: center;
    }

    .video-stats {
        justify-content: center;
    }

    .story-takeaways {
        grid-template-columns: 1fr;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .stories-hero {
        min-height: 570px;
        padding: 155px 1rem 130px;
    }

    .stories-hero p {
        font-size: 1rem;
    }

    .stories-sun {
        right: -35px;
        top: 100px;
    }

    .stories-cloud {
        font-size: 4rem;
    }

    .story-card {
        grid-template-columns: 1fr;
    }

    .story-art {
        min-height: 360px;
    }

    .stories-content {
        padding-top: 3.5rem;
    }

    .stories-footer-note {
        padding: 0 1rem;
    }

    .stories-page .nav-links {
        gap: 0;
    }
}

@media (max-width: 480px) {
    .story-copy {
        padding: 2rem 1.4rem;
    }

    .story-copy p {
        font-size: .98rem;
    }

    .story-art {
        min-height: 320px;
    }

    .stories-intro {
        padding: 0 1rem;
    }
}

/* ============================================================
   International Literacy Day — "Refocusing Our Mission: LSRW"
   ============================================================ */
.literacy-day-section {
    padding: 5rem 0 6rem;
    background: linear-gradient(180deg, #fdfbf7 0%, #eff6df 100%);
}

.literacy-day-head {
    max-width: 880px;
    margin: 0 auto 3rem;
    text-align: center;
}

.literacy-day-head .header-badge {
    display: inline-block;
    border-left: none;
    padding-left: 0;
    color: #3f7f4f;
    font-family: 'Playpen Sans', cursive;
    font-size: .82rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #e9f3d8, #fff5db);
    border-radius: 999px;
    padding: .55rem 1.3rem;
    margin-bottom: 1.4rem;
}

.literacy-day-head h2 {
    margin: 1.2rem 0 .7rem;
    color: #3f3f3f;
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    line-height: 1.15;
}

.literacy-day-head h2 span {
    color: #3f7f4f;
}

.literacy-day-subtitle {
    color: #5c6659;
    font-size: 1.1rem;
}

.literacy-day-badge {
    display: inline-block;
    margin-top: .8rem;
    padding: .55rem 1.15rem;
    border-radius: 999px;
    background: #fff8e3;
    color: #b07a1d;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .4px;
}

.literacy-day-letter {
    max-width: 940px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem);
    background: #fff;
    border: 1px solid rgba(155, 180, 107, .25);
    border-radius: 32px;
    box-shadow: 0 22px 60px rgba(63, 63, 63, .09);
}

.literacy-day-letter p {
    color: #625e5a;
    font-size: 1.06rem;
    line-height: 1.9;
}

.literacy-greeting {
    font-weight: 800;
    color: #3f3f3f;
}

.literacy-day-letter h3 {
    margin: 2.4rem 0 .85rem;
    color: #3f7f4f;
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
}

.literacy-quote {
    margin: 0 0 2.4rem;
    padding: 1.9rem 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, #e9f3d8 0%, #fff5db 100%);
    border-radius: 22px;
}

.literacy-quote .quote-mark {
    display: block;
    color: #ffb7b2;
    font-family: 'Playpen Sans', cursive;
    font-size: 3.2rem;
    line-height: .5;
}

.literacy-quote p {
    margin: .9rem 0 .4rem;
    color: #3f7f4f;
    font-family: 'Playpen Sans', cursive;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
}

.literacy-quote .quote-theme {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #9b8c6a;
}

.lsrw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    margin: 1.7rem 0 2.1rem;
}

.lsrw-item {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.35rem 1.4rem;
    background: #f7fbf0;
    border: 1px solid rgba(155, 180, 107, .28);
    border-radius: 18px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.lsrw-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(63, 127, 79, .12);
}

.lsrw-letter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3f7f4f, #9bb46b);
    color: #fff;
    font-family: 'Playpen Sans', cursive;
    font-size: 1.5rem;
    font-weight: 700;
}

.lsrw-item h4 {
    margin: 0 0 .35rem;
    color: #3f3f3f;
    font-size: 1.08rem;
}

.lsrw-item p {
    font-size: .98rem;
    line-height: 1.75;
}

.literacy-commit {
    margin: 2.2rem 0 0;
    padding: 1.7rem 1.9rem;
    background: linear-gradient(135deg, #fff5db, #ffe9c9);
    border-left: 5px solid #e6a93c;
    border-radius: 0 18px 18px 0;
}

.literacy-commit p {
    margin: 0;
    color: #4d3f26;
    font-size: 1.05rem;
    line-height: 1.8;
}

.literacy-commit strong {
    color: #b07a1d;
}

.literacy-signoff {
    margin-top: 2.6rem;
    padding-top: 1.8rem;
    border-top: 2px dashed rgba(155, 180, 107, .45);
}

.literacy-signoff p {
    margin: .2rem 0;
}

.literacy-signoff .signoff-name {
    margin-top: 1rem;
    color: #3f3f3f;
    font-weight: 800;
}

.literacy-signoff .signoff-org {
    color: #3f7f4f;
    font-family: 'Playpen Sans', cursive;
    font-weight: 700;
}

.literacy-day-section .stories-footer-note {
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .literacy-day-section {
        padding: 4rem 0 5rem;
    }

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

@media (max-width: 480px) {
    .literacy-day-letter {
        padding: 1.7rem 1.3rem;
        border-radius: 22px;
    }

    .literacy-day-head h2 {
        font-size: 1.75rem;
    }

    .literacy-quote p {
        font-size: 1.15rem;
    }

    .lsrw-item {
        padding: 1.1rem 1.1rem;
    }

    .literacy-commit {
        padding: 1.4rem 1.3rem;
    }
}

/* ============================================================
   Literacy Day — Celebration Upgrade (banner + highlights)
   ============================================================ */

/* Section: banner flush at top + richer layered background */
.literacy-day-section {
    padding: 0 0 6rem;
    background:
        radial-gradient(circle at 12% 35%, rgba(255, 183, 178, .16), transparent 36%),
        radial-gradient(circle at 88% 28%, rgba(155, 180, 107, .20), transparent 38%),
        linear-gradient(180deg, #fdfbf7 0%, #e9f3d8 100%);
}

/* ---- Celebratory banner ---- */
.literacy-banner {
    position: relative;
    overflow: hidden;
    padding: 2.7rem 1.5rem 3.6rem;
    text-align: center;
    background: linear-gradient(115deg, #2f7a46 0%, #3f7f4f 30%, #7fa860 55%, #f7c95b 82%, #ff9e91 100%);
}

.literacy-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 24px;
    background: radial-gradient(circle at 10px -8px, transparent 14px, #fdfbf7 15px) repeat-x;
    background-size: 40px 24px;
}

.literacy-banner .banner-line {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-family: 'Playpen Sans', cursive;
    font-size: clamp(1.45rem, 3.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: .5px;
    text-shadow: 0 2px 12px rgba(47, 63, 47, .35);
}

.literacy-banner .banner-sub {
    position: relative;
    z-index: 2;
    margin: .45rem 0 0;
    color: rgba(255, 255, 255, .94);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.literacy-banner .float-letter {
    position: absolute;
    z-index: 1;
    font-family: 'Playpen Sans', cursive;
    font-weight: 800;
    color: rgba(255, 255, 255, .32);
    user-select: none;
    pointer-events: none;
    animation: literacyFloat 5s ease-in-out infinite;
}

.literacy-banner .fl-a {
    left: 6%;
    top: 16%;
    font-size: 3.1rem;
}

.literacy-banner .fl-b {
    left: 18%;
    top: 58%;
    font-size: 2.3rem;
    animation-delay: .6s;
}

.literacy-banner .fl-c {
    right: 16%;
    top: 20%;
    font-size: 2.7rem;
    animation-delay: 1.1s;
}

.literacy-banner .fl-book {
    right: 7%;
    top: 60%;
    font-size: 2.5rem;
    animation-delay: 1.6s;
}

.literacy-banner .fl-pen {
    left: 44%;
    top: 10%;
    font-size: 1.9rem;
    animation-delay: 2s;
}

.literacy-banner .fl-abc {
    left: 64%;
    top: 72%;
    font-size: 2rem;
    animation-delay: .4s;
}

.literacy-banner .fl-star {
    right: 40%;
    top: 12%;
    font-size: 1.7rem;
    animation-delay: 2.4s;
}

@keyframes literacyFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-13px) rotate(5deg);
    }
}

/* ---- Festive badge glow ---- */
.literacy-day-head .header-badge {
    animation: badgeGlow 2.6s ease-in-out infinite;
}

@keyframes badgeGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(63, 127, 79, .4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(63, 127, 79, 0);
    }
}

/* ---- Date pill ---- */
.literacy-day-badge {
    border: 2px dashed #f7c95b;
    background: linear-gradient(90deg, #fff8e3, #ffeccb);
    box-shadow: 0 6px 18px rgba(230, 169, 60, .18);
}

/* ---- Letter card: rainbow top edge ---- */
.literacy-day-letter {
    position: relative;
    overflow: hidden;
}

.literacy-day-letter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    background: linear-gradient(90deg, #3f7f4f, #9bb46b, #f7c95b, #ffb7b2);
}

/* ---- Quote card upgrade ---- */
.literacy-quote {
    position: relative;
    overflow: hidden;
}

.literacy-quote::before,
.literacy-quote::after {
    position: absolute;
    font-family: 'Playpen Sans', cursive;
    line-height: 1;
    color: rgba(255, 183, 178, .35);
    font-size: 6.5rem;
    pointer-events: none;
}

.literacy-quote::before {
    content: '“';
    top: .2rem;
    left: 1rem;
}

.literacy-quote::after {
    content: '”';
    bottom: .2rem;
    right: 1rem;
    transform: rotate(180deg);
}

/* ---- LSRW tiles: color coded ---- */
.lsrw-item:nth-child(1) {
    border-left: 4px solid #3f7f4f;
}

.lsrw-item:nth-child(2) {
    border-left: 4px solid #5ba3d9;
}

.lsrw-item:nth-child(3) {
    border-left: 4px solid #e6a93c;
}

.lsrw-item:nth-child(4) {
    border-left: 4px solid #ff8f7e;
}

.lsrw-item:nth-child(1) .lsrw-letter {
    background: linear-gradient(135deg, #2f8f5b, #8cc48f);
}

.lsrw-item:nth-child(2) .lsrw-letter {
    background: linear-gradient(135deg, #3b82c4, #8ec9ef);
}

.lsrw-item:nth-child(3) .lsrw-letter {
    background: linear-gradient(135deg, #e6a93c, #ffd87a);
}

.lsrw-item:nth-child(4) .lsrw-letter {
    background: linear-gradient(135deg, #ff8f7e, #ffc0ba);
}

/* ---- Commitment callout: book icon ---- */
.literacy-commit {
    position: relative;
    padding-left: 4.4rem;
}

.literacy-commit::before {
    content: '📚';
    position: absolute;
    left: 1.1rem;
    top: 1.35rem;
    font-size: 1.9rem;
    line-height: 1;
}

@media (max-width: 480px) {
    .literacy-banner {
        padding: 2.2rem 1rem 3rem;
    }

    .literacy-commit {
        padding-left: 1.4rem;
    }

    .literacy-commit::before {
        display: none;
    }
}

/* ============================================================
   Blog page — Admin login hidden in navbar, shown in mobile sidebar
   ============================================================ */
.stories-page .nav-links li.nav-admin-sidebar {
    display: none;
}

@media (max-width: 768px) {
    .stories-page .nav-links li.nav-admin-sidebar {
        display: block;
    }

    .stories-page .nav-links li.nav-admin-sidebar .lms-btn {
        display: inline-flex;
        font-family: 'Playpen Sans', 'Gaegu', cursive;
        font-size: 1.15rem;
        padding: 0.7rem 1.6rem;
        margin-top: 0.4rem;
    }

    .stories-page .nav-links li.nav-admin-sidebar .lms-btn::after {
        display: none;
    }

    .stories-page .nav-links.active li:nth-child(8) {
        transition-delay: 0.8s;
    }
}