@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Cormorant+Garamond:ital,wght@1,500&family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

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

        :root{
            --color-orange: #CC5500;
            --color-forest: #083D28;
            --color-maroon: #9B1B30;
            --color-brown: #6D2A0B;
            --color-gray: #585e68;
            --color-paper: #E8D9C5;
            --color-paper-text: #333333;
            --color-border: #000000;
            --color-shadow: #1A120B;
            --color-pressed-shadow: #1a120be2;
        }
        
        html{
            scroll-behavior: smooth;
        }

        @keyframes fadeUp{
                from{
                    opacity: 0;
                    transform: translateY(40px);
                }

                to{
                    opacity: 1;
                    transform: translateY(0);
                }
            }

        @keyframes scroll{
                from{
                    transform:translateX(0);
                }
                to{
                    transform:translateX(-50%);
                }
            }

        @keyframes stampHit{
                0%{
                    opacity: 0;
                    transform:
                    rotate(-18deg)
                    scale(0);
                }
                70%{
                    opacity: 1;
                    transform:
                    rotate(-18deg)
                    scale(1.2);
                }
                100%{
                    opacity: 1;
                    transform:
                    rotate(-18deg)
                    scale(1);
                }
            }

            body{
                padding-top:50px;
                background: linear-gradient(
                            135deg,
                             #fff5dc 0%,
                             #ffddaf 35%,
                             #ffc680 70%,
                             #ffb86b 100%
                            );
                background-attachment: fixed;
                font-family: 'kode mono', monospace;
            }

            .top-bar{
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
                padding: 20px 40px;
                display: flex;
                align-items: center;
                border-bottom: 2px solid var(--color-border);
                z-index: 100;
                background: linear-gradient(
                            135deg,
                             #fff5dcfb 0%,
                             #ffdeaffa 35%,
                             #ffc680fb 70%,
                             #ffb86bfb 100%
                            );
            }

            .logo{
                width: 100%;
                max-width: 52px;
                height: 100%;
                max-height: 52px;
                object-fit: contain;
                margin-right: 16px;
            }
            .title-box{
                display: flex;
                flex-direction: column;
            }
            .main-title{
                font-size: 26px;
                font-weight: bold;
                color: black;
            }
            .sub-title{
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: var(--color-gray);
                margin-top: 4px;
            }

            .nav-bar{
                display: flex;
                align-items: center;
                flex: 1;
                justify-content: center;
                font-size: 20px;
            }

            .origin{
                position: relative;
                text-decoration: none;
                color: black;
            }
            .origin::after{
                content: "";
                position: absolute;
                left: 0;
                bottom: -5px;
                width: 0%;
                height: 2px;
                background: var(--color-orange);
                transition: width 0.2s ease;
            }
            .origin:hover::after{
                width: 100%;
            }

            .manifesto{
                margin-left: 30px;
                position: relative;
                text-decoration: none;
                color: black;
            }
            .manifesto::after{
                content: "";
                position: absolute;
                left: 0;
                bottom: -5px;
                width: 0%;
                height: 2px;
                background: var(--color-orange);
                transition: width 0.2s ease;
            }
            .manifesto:hover::after{
                width: 100%;
            }

            .contact{
                margin-left: 30px;
                position: relative;
                text-decoration: none;
                color: black;
            }
            .contact::after{
                content: "";
                position: absolute;
                left: 0;
                bottom: -5px;
                width: 0%;
                height: 2px;
                background: var(--color-orange);
                transition: width 0.2s ease;
            }
            .contact:hover::after{
                width: 100%;
            }

            .join{
                margin-left: auto;
                font-family: 'Press Start 2P', monospace;
                font-size: 20px;
                text-decoration: none;
                color: #4a356d;
                padding: 10px 18px;
                background: #e8e3d8;
                border-top: 3px solid #ffffff;
                border-left: 3px solid #ffffff;
                border-right: 3px solid #555555;
                border-bottom: 3px solid #555555;
                display: inline-block;
                transition: 0.12s ease;
                box-shadow:
                inset 1px 1px 0 #ffffff,
                inset -1px -1px 0 #999999;
            }
            .join:hover{
                transform: translateY(-3px);
                box-shadow:
                0 4px 0 #777,
                inset 1px 1px 0 #ffffff,
                inset -1px -1px 0 #999999;
            }
            .join:active{
                transform: translateY(2px);
                border-top: 3px solid #555555;
                border-left: 3px solid #555555;
                border-right: 3px solid #ffffff;
                border-bottom: 3px solid #ffffff;
            }

             .info{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 80px 60px;
                position: relative;
                overflow: hidden;
            }
            .info::before{
                content: "";
                position: absolute;
                inset: 0;
                background-image:
                linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),
                linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);
                background-size: 40px 40px;
                pointer-events: none;
            }

            .info-left{
                width: 55%;
                position: relative;
                z-index: 2;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-right: 40px;
            }

            .info-text{
                max-width: 750px;
                font-family: 'bowlby one', bold;
                font-size: 64px;
                font-weight: 500;
                line-height: 1.15;
                color: var(--color-shadow);
                margin-bottom: 24px;
                opacity: 0;
                animation: fadeUp 1s ease forwards;
            }

            .system{
                font-size: 74px;
                font-family: 'Anton', sans-serif;
                color: var(--color-orange);
                letter-spacing: 2px;
            }
            .count{
                font-family: 'Cormorant Garamond', serif;
                font-style: italic;
                font-size: 94px;
                color: var(--color-forest);
            }

            .info-buttons{
                display: flex;
                white-space: nowrap;
                margin-top: 25px;
                gap: 18px;
                align-items: center;
                opacity: 0;
                animation: fadeUp 1s ease forwards;
                animation-delay: 0.3s;
            }

            .protests{
                display: inline-block;
                padding: 24px 42px;
                background: var(--color-orange);
                color: var(--color-paper);
                font-family: 'Anton', sans-serif;
                font-size: 20px;
                letter-spacing: 2px;
                text-decoration: none;
                border: 4px solid var(--color-border);
                box-shadow: 4px 4px 0 var(--color-shadow);
                transform: rotate(-2deg);
                transition: 0.15s ease;
            }
            .protests:hover{
                transform: rotate(0deg) translate(-3px,-3px);
                box-shadow:
                7px 7px 0 var(--color-pressed-shadow);
            }

            .sack{
                display: inline-block;
                padding: 24px 42px;
                background: var(--color-forest);
                color: var(--color-paper);
                font-family: 'Anton', sans-serif;
                font-size: 20px;
                letter-spacing: 2px;
                text-decoration: none;
                border: 4px solid var(--color-border);
                box-shadow: 4px 4px 0 var(--color-shadow);
                transform: rotate(2deg);
                transition: 0.15s ease;
            }
            .sack:hover{
                transform: rotate(0deg) translate(-3px, -3px);
                box-shadow: 7px 7px 0 var(--color-pressed-shadow);
            }

            .info-right{
                position: relative;
                width: 100%;
                max-width: 380px;
                margin-left: -40px;
                transition: 0.3s;
                opacity: 0;
                animation: fadeUp 1s ease forwards;
                animation-delay: 0.6s;
            }

            .info-right img{
                width:100%;
                height:auto;
                border:4px solid var(--color-border);
                box-shadow: 
                8px 8px 0 var(--color-orange),
                16px 16px 0 var(--color-forest);
                transition: 0.3s;
            }
            .info-right img:hover{
                transform: translate(-4px, -4px);
                box-shadow:
                12px 12px 0 var(--color-orange),
                24px 24px 0 var(--color-forest);
            }

            .official{
                position: absolute;
                bottom: -22px;
                left: 0;
                font-family: 'Anton', sans-serif;
                font-size: 20px;
                color: black;
                text-decoration: none;
                background: var(--color-paper);
                padding: 18px 36px;
                border: 4px solid var(--color-border);
                box-shadow: 4px 4px 0 var(--color-shadow);
                transform:rotate(-2deg);
                transition:0.15s ease;
            }
            .official:hover{
                transform: rotate(0deg) translate(-3px,-3px);
                box-shadow: 7px 7px 0 var(--color-pressed-shadow);
            }

            .ribbon{
                width: 100%;
                height: 100%;
                max-height: 100px;
                overflow: hidden;
                background: var(--color-shadow);
                border-top: 3px solid var(--color-orange);
                border-bottom: 3px solid var(--color-forest);
                padding: 25px 0;
                white-space: nowrap;
            }
            .ribbon-track{
                display: flex;
                width: max-content;
                animation: scroll 30s linear infinite;
            }
            .ribbon-track > span{
                font-family: 'Bowlby One',sans-serif;
                font-size: 34px;
                font-weight: 300;
                color: #dd8d53;
                letter-spacing: 2px;
            }

            .star{
                color: #16543b;
                margin: 0 12px;
            }

            .section-origin{
                scroll-margin-top: 90px;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 80px 60px;
                position: relative;
                overflow: hidden;
                gap: 12px;
            }
            .section-origin::before{
                content: "";
                position: absolute;
                inset: 0;
                background-image:
                linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),
                linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);
                background-size: 40px 40px;
                pointer-events: none;
            }

            .chapter-1{
                font-size: 2rem;
                text-align: center;
                color: black;
            }
            .origin-title{
                text-align: center;
                color: var(--color-orange);
                font-size: clamp(4rem,8vw,6rem);
                text-transform: uppercase;
                margin-bottom: 40px;
                font-family: 'Bungee',sans-serif;
            }

            .origin-intro{
                font-size: 1.15rem;
                max-width: 700px;
                margin: 0 auto 4rem;
                line-height: 1.8;
                color: var(--color-gray);
                text-transform: uppercase;
                letter-spacing: .08em;
                position: relative;
                z-index: 2;
            }

            .origin-board{
                width: 100%;
                max-width: 1100px;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 40px;
                position: relative;
                z-index: 2;
            }

            .origin-poster{
                width: 100%;
                max-width: 460px;
                background: var(--color-paper);
                padding: 30px;
                border: 4px solid var(--color-border);
                box-shadow: 10px 10px 0 var(--color-shadow);
                transition: 0.2s ease;
                position: relative;
            }
            .origin-poster::before{
                content: "";
                position: absolute;
                top: 12px;
                right: 18px;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background:
                radial-gradient(
                circle at 30% 30%,
                #d20a0a
                );
                border: 2px solid var(--color-border);
                box-shadow:
                2px 2px 4px rgba(0,0,0,0.25);
                z-index: 2;
            }
            .origin-poster:nth-child(odd){
                transform: rotate(-2deg);
            }
            .origin-poster:nth-child(even){
                transform: rotate(2deg);
            }
            .origin-poster:last-child{
                transform: rotate(0deg);
            }
            .origin-poster:hover{
                transform: rotate(0deg) scale(1.03);
                box-shadow: 15px 15px 0 var(--color-orange);
            }
            

            .poster-date{
                display: inline-block;
                padding: 8px 14px;
                background: var(--color-maroon);
                color: var(--color-paper);
                border: 2px solid var(--color-border);
                margin-bottom: 18px;
                font-weight: bold;
            }
            .origin-poster h3{
                font-family: 'Bungee', sans-serif;
                font-size: 1.7rem;
                margin-bottom: 16px;
                color: var(--color-shadow);
            }
            .origin-poster p{
                line-height: 1.8;
                font-size: 1rem;
                color: var(--color-paper-text);
            }

            .section-manifesto{
                scroll-margin-top: 90px;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 80px 60px;
                position: relative;
                overflow: hidden;
                gap: 12px;
                background:
                linear-gradient(
                    90deg,
                    #3c1e12 0%,
                    #291107 35%,
                    #1c0a03 70%,
                    #190700 100%
                    );
            }
            .section-manifesto::before{
                content: "";
                position: absolute;
                inset: 0;
                background-image:
                linear-gradient(rgba(255, 255, 255, 0.04) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255, 255, 255, 0.04) 1px,transparent 1px);
                background-size: 40px 40px;
                pointer-events: none;
            }

            .chapter-2{
                font-size: 2rem;
                text-align: center;
                color: white;
            }
            .manifesto-title{
                text-align: center;
                font-size: clamp(4rem,8vw,6rem);
                text-transform: uppercase;
                margin-bottom: 40px;
                font-family: 'Bungee',sans-serif;
                color: white;
            }

            .manifesto-intro{
                font-size: 1.15rem;
                max-width: 600px;
                margin: 0 auto 4rem;
                line-height: 1.8;
                color: var(--color-gray);
                text-transform: uppercase;
                letter-spacing: .08em;
                position: relative;
                z-index: 2;
            }

            .manifesto-paper{
                max-width: 950px;
                margin: 0 auto;
                background: var(--color-paper);
                color: var(--color-paper-text);
                padding: 3rem;
                border: 4px solid var(--color-border);
                box-shadow:
                10px 10px 0 var(--color-brown),
                20px 20px 40px rgba(0,0,0,.45);
                text-align: left;
                position: relative;
                z-index: 2;
            }

            .manifesto-point{
                display: flex;
                gap: 1.5rem;
                align-items: flex-start;
                padding: 2rem 0;
                border-bottom: 2px dashed rgba(36, 29, 26, 0.25);
            }
            .manifesto-point:last-of-type{
                border-bottom: none;
            }

            .manifesto-number{
                flex-shrink: 0;
                font-family: "Bungee", sans-serif;
                font-size: 2rem;
                color: var(--color-brown);
                line-height: 1;
            }        
            .manifesto-text{
                font-size: 1.1rem;
                line-height: 1.8;
                font-weight: 600;
                letter-spacing: .02em;
            }

            .closing{
                margin-top: 4rem;
                text-align: center;
                padding-top: 2rem;
                border-top: 4px solid var(--color-brown);
            }
            .closing p{
                font-family: "Bungee", sans-serif;
                font-size: clamp(1.5rem, 4vw, 3rem);
                color: var(--color-brown);
                margin: .5rem 0;
                text-transform: uppercase;
                letter-spacing: .1em;
            }

            .cockroach-stamp{
                position: absolute;
                bottom: 40px;
                right: 50px;
                padding: 18px 28px;
                border: 8px solid #6B0F1A;
                outline: 3px solid #6B0F1A;
                outline-offset: -10px;
                color: #6B0F1A;
                font-weight: 900;
                font-size: 1.5rem;
                line-height: 1.1;
                letter-spacing: 3px;
                text-transform: uppercase;
                text-align: center;
                text-shadow:
                1px 1px 0 rgba(107,15,26,0.25);
                background:
                rgba(107,15,26,0.04);
                box-shadow:
                0 0 15px rgba(107,15,26,0.2);
                transform:
                rotate(-18deg)
                scale(0);
                opacity: 0;
                z-index: 5;
            }
            .cockroach-stamp.show{
                animation:
                stampHit 0.5s ease forwards;
            }

            .section-contact{
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 80px 60px;
                position: relative;
                overflow: hidden;
                gap: 12px;
                scroll-margin-top: 90px;
            }
            .section-contact::before{
                content: "";
                position: absolute;
                inset: 0;
                background-image:
                linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),
                linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);
                background-size: 40px 40px;
                pointer-events: none;
            }

            .chapter-3{
                font-size: 2rem;
                text-align: center;
                color: black;
            }
            .contact-title{
                text-align: center;
                color: var(--color-forest);
                font-size: clamp(4rem,8vw,6rem);
                text-transform: uppercase;
                margin-bottom: 40px;
                font-family: 'Bungee',sans-serif;
            }

            .contact-intro{
                font-size: 1.15rem;
                max-width: 700px;
                margin: 0 auto 4rem;
                line-height: 1.8;
                color: var(--color-gray);
                text-transform: uppercase;
                letter-spacing: .08em;
                text-align: center;
                position: relative;
                z-index: 2;
            }

            .contact-card{
                width: 100%;
                max-width: 1000px;
                background: var(--color-paper);
                border: 4px solid var(--color-border);
                padding: 3rem;
                box-shadow:
                10px 10px 0 var(--color-forest),
                20px 20px 40px rgba(0,0,0,.2);
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
                position: relative;
                z-index: 2;
            }
            .contact-block{
                padding: 2rem;
                border: 3px solid var(--color-border);
                background: rgba(255,255,255,0.4);
            }
            .contact-block h3{
                font-family: 'Bungee',sans-serif;
                color: var(--color-brown);
                margin-bottom: 1rem;
                font-size: 1.2rem;
            }

            .founder-card{
                display: flex;
                align-items: center;
                gap: 2rem;
            }

            .founder-image{
                width: 180px;
                height: 180px;
                object-fit: cover;
                border: 4px solid var(--color-border);
                transform: rotate(-2deg);
                box-shadow:
                0px 0px 0 var(--color-orange),
                0px 0px 0 var(--color-forest);
                transition:
                box-shadow 0.25s ease,
                transform 0.25s ease;
            }

            .founder-image:hover{
                transform: rotate(0deg);
                box-shadow:
                8px 8px 0 var(--color-orange),
                16px 16px 0 var(--color-forest);
            }

            .founder-info{
                flex: 1;
            }

            .contact-text{
                font-size: 1.2rem;
                font-weight: bold;
                line-height: 1.8;
            }
            .contact-subtext{
                margin-top: .5rem;
                line-height: 1.8;
                color: var(--color-gray);
            }
            .contact-link{
                text-decoration: none;
                color: var(--color-orange);
                font-weight: bold;
                font-size: 1.1rem;
            }

            .social-grid{
                display: grid;
                grid-template-columns:
                repeat(auto-fit,minmax(180px,1fr));
                gap: 1rem;
            }
            .social-link{
                text-decoration: none;
                text-align: center;
                padding: 1rem;
                background: var(--color-shadow);
                color: var(--color-paper);
                border: 3px solid var(--color-border);
                transition: 0.2s ease;
            }
            .social-link:hover{
                transform: translate(-4px,-4px);

                box-shadow:
                6px 6px 0 var(--color-orange);
            }

            .join-block{
                text-align: center;
            }
            .join-movement{
                display: inline-block;
                margin-top: 1rem;
                padding: 16px 32px;
                background: var(--color-orange);
                color: white;
                text-decoration: none;
                border: 3px solid var(--color-border);
                box-shadow:
                4px 4px 0 var(--color-shadow);
                font-family: 'Anton',sans-serif;
                letter-spacing: 1px;
                transition: 0.15s ease;
            }
            .join-movement:hover{
                transform: translate(-3px,-3px);
                box-shadow:
                7px 7px 0 var(--color-shadow);
            }

            .secret-overlay{
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.55);
                opacity: 0;
                pointer-events: none;
                transition: 0.3s ease;
                z-index: 9998;
            }
            .secret-overlay.show{
                opacity: 1;
                pointer-events: auto;
            }

            .secret-poster{
                position: fixed;
                top: 50%;
                left: 50%;
                width: 420px;
                max-width: 90%;
                padding: 30px;
                background: var(--color-paper);
                border: 4px solid var(--color-border);
                box-shadow:
                8px 8px 0 var(--color-shadow);
                transform:
                translate(-50%, -50%)
                rotate(-6deg)
                scale(0);
                opacity: 0;
                transition: 0.35s ease;
                z-index: 9999;
            }
            .secret-poster.show{
                opacity: 1;
                transform:
                translate(-50%, -50%)
                rotate(-2deg)
                scale(1);
            }

            .secret-close{
                position: absolute;
                top: 12px;
                right: 12px;
                width: 38px;
                height: 38px;
                border: 3px solid var(--color-border);
                background: var(--color-paper);
                font-size: 1rem;
                font-weight: bold;
                cursor: pointer;
                transition: 0.25s ease;
            }
            .secret-close:hover{
                transform: rotate(90deg);
                background: var(--color-orange);
                color: white;
            }

            .secret-label{
                display: inline-block;
                margin-bottom: 15px;
                padding: 6px 12px;
                background: var(--color-brown);
                color: black;
                letter-spacing: 2px;
                font-size: 35px;
                font-family: 'Anton', sans-serif;
                font-weight: bold;
                transform: rotate(-4deg);
            }
            .secret-poster h3{
                font-family:'Courier New', Courier, monospace;
                margin-bottom: 15px;
                color: var(--color-orange);
            }
            .secret-poster p{
                margin-bottom: 12px;
                color: var(--color-paper-text);
            }

            .secret-poster p.secret-status{
                font-weight: bold;
                color: var(--color-maroon);
                font-family: 'Share Tech Mono', sans-serif;
            }

            .protest-page{
                margin-top: 0;
                padding: 48px 40px 40px;
            }

            .protest-hero{
                text-align: center;
                margin-bottom: 96px;
                padding-top: 8px;
            }

            .hero-card{
                display: inline-block;
                padding: 36px 48px;
                border: 6px solid var(--color-border);
                background: white;
                box-shadow: 12px 12px 0 var(--color-orange);
                transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
            }

            .hero-card:hover{
                transform: translateY(-8px);
                box-shadow: 18px 18px 0 rgba(204,85,0,0.9);
                border-color: var(--color-forest);
                background: #fff9f0;
            }

            .hero-title{
                font-family: 'Bungee', sans-serif;
                font-size: 48px;
                margin-bottom: 8px;
                color: var(--color-maroon);
                transition: color 0.25s ease, transform 0.25s ease;
            }

            .hero-card:hover .hero-title{
                color: var(--color-forest);
                transform: scale(1.02);
            }

            .hero-subtitle{
                font-size: 16px;
                color: var(--color-gray);
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .back-button{
                position: fixed;
                left: 12px;
                top: 12px;
                z-index: 110;
                text-decoration: none;
                background: var(--color-paper);
                color: var(--color-maroon);
                border: 4px solid var(--color-border);
                padding: 8px 12px;
                font-weight: 700;
                box-shadow: 4px 4px 0 var(--color-shadow);
                display: inline-block;
                transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
            }

            .back-button:hover{
                transform: translateY(-3px);
                box-shadow: 6px 6px 0 rgba(26,18,11,0.8);
                background: #fff8d8;
                border-color: var(--color-forest);
            }

            .back-button--icon{
                width: 44px;
                height: 44px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                border-radius: 6px;
            }

            .back-button--icon svg{
                width: 18px;
                height: 18px;
                display: block;
            }

            .protest-grid{
                display: grid;
                grid-template-columns: 1fr;
                gap: 36px;
                align-items: start;
            }

            .protest-section-title{
                margin-bottom: 16px;
                font-family: 'Bungee', sans-serif;
                transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
            }

            .protest-section-title:hover{
                color: var(--color-maroon);
                transform: translateX(2px);
                text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
            }

            .protest-upcoming-title{
                color: var(--color-forest);
            }

            .protest-list{
                display: flex;
                flex-direction: column;
                gap: 32px;
            }

            .protest-card{
                padding: 28px 30px;
                border: 4px solid var(--color-border);
                background: var(--color-paper);
                box-shadow: 10px 10px 0 var(--color-shadow);
                min-height: 220px;
                transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
            }
            
            .protest-card:hover{
                transform: translate(5px,5px);
                box-shadow:
                5px 5px 0 var(--color-shadow);
            }

            .protest-card-header{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 24px;
            }

            .protest-event-title{
                font-size: 22px;
            }

            .protest-event-location{
                color: var(--color-gray);
                font-size: 15px;
                margin-top: 8px;
            }

            .protest-event-meta{
                text-align: right;
            }

            .protest-status{
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-top: 8px;
                padding: 5px 10px;
                border-radius: 999px;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
            }

            .protest-status--completed{
                color: #155724;
                background: #d4edda;
                border: 1px solid #c3e6cb;
            }

            .protest-event-meta div{
                margin-top: 6px;
                font-weight: bold;
            }

            @media (max-width: 768px){
                
                .top-bar{
                flex-direction: column;
                gap: 15px;
                padding: 20px;
                }

                .title-box{
                text-align: center;
                }

                .main-title{
                font-size: 2rem;
                }

                .sub-title{
                font-size: 0.9rem;
                }

                .nav-bar{
                    width: 100%;
                    justify-content: center;
                    flex-wrap: wrap;
                    gap: 15px;
                }

                .join{
                    width: 100%;
                    text-align: center;
                }

                .info{
                    flex-direction: column;
                    text-align: center;
                    gap: 40px;
                    padding: 60px 20px;
                }

                .info-text{
                    font-size: clamp(2rem, 8vw, 3.5rem);
                }

                .info-buttons{
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                }

                .protests,
                .sack{
                    width: 100%;
                    max-width: 350px;
                    text-align: center;
                }

                .info-right img{
                    width: 100%;
                    max-width: 320px;
                }

                .official{
                    margin-top: 20px;
                }

                .origin-board{
                    grid-template-columns: 1fr;
                }

                .origin-poster{
                    width: 100%;
                    max-width: 400px;
                    margin: 0 auto;
                }

                .section-origin,
                .section-manifesto,
                .section-contact{
                    padding-left: 20px;
                    padding-right: 20px;
                }

                .protest-hero{
                    margin-bottom: 40px;
                }

                .manifesto-paper{
                    padding: 30px 20px;
                }

                .cockroach-stamp{
                    right: 20px;
                    bottom: 20px;
                    font-size: 1rem;
                    padding: 12px 18px;
                }

                .founder-card{
                    flex-direction: column;
                    text-align: center;
                }

                .founder-image{
                    width: 150px;
                    height: 150px;
                }

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

                .join-movement{
                    width: 100%;
                    text-align: center;
                }

                .secret-poster{
                    width: 90%;
                    padding: 20px;
                }
        }