:root{
    --bg: #050505;
    --paper: #0f0f0f;
    --muted: #8a8a8a;
    --accent: #e33a3a;
    --accent-2: #ff7b7b;
    --text: #e9e9e9;
    --lead: #ffffff;
}

/* Page frame */
*{box-sizing:border-box}
body{
    background: linear-gradient(180deg,#000 0%, #0b0b0b 100%);
    color:var(--text);
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
    max-width:760px;
    margin:36px auto;
    margin-bottom:0;
    padding:36px 28px;
    padding-bottom:0;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}

article {
    padding-top: 1em;
}

/* Headings */

/* Headline: Constructivist, uppercase, geometric */
h1{
    font-family: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow Bold', sans-serif;
    font-weight:700;
    font-size:56px;
    letter-spacing:2px;
    text-align:center;
    margin:0 0 6px 0;
    line-height:1.02;
    text-transform:uppercase;
    color:#fff;
    display:block;
}

.muted{color:#bdbdbd;font-weight:700}
.accent{color:#ff1e1e;font-weight:900}
.subtitle{font-size:0.6em;color:#fff;background:#ff1e1e;padding:4px 8px;border-radius:2px;margin-left:6px}

/* Section headings — blocky, left-aligned, strong */
h2{
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-weight:700;
    letter-spacing:1px;
    font-size:18px;
    margin:24px 0 8px;
    text-align:left;
    color:#fff;
    background:linear-gradient(90deg,#ff1e1e 0%, #ff1e1e 18%, transparent 18%);
    padding:10px 12px;
    transform:skewX(-10deg);
}

h2 span{display:inline-block;transform:skewX(10deg)}

/* Sections and text */
.padded-paragraph, p{color:var(--text);margin:0 0 14px;padding-left:6px;text-align: justify;}
.callout + p, footer p {padding-left:0}

/* center footer CTA */
footer{text-align:center}

/* ensure footer paragraphs don't inherit the body left padding */
footer p{padding-left:0;margin:0;text-align:center}
.lead{display:block;color:var(--lead);font-weight:800;font-size:1.03rem;}

/* Block quote / manifesto callouts */
.callout{background:#111;padding:12px 14px;border-left:6px solid #ff1e1e;margin:12px 0;border-radius:2px}

/* Strong call-to-action */
.cta{
    display:inline-block;
    margin: 1em auto 0.8em auto;
    padding:18px 28px;
    font-size: xx-large;
    font-family: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow Bold', sans-serif;
    background:#ff1e1e;
    color:#fff;
    font-weight:900;
    border-radius:2px;
    text-align:center;
}

/* Styled horizontal rule */
hr{border:0;height:2px;background:linear-gradient(90deg, rgba(255,30,30,0.85), rgba(0,0,0,0));margin:22px 0}

/* Small readable tweaks */
body strong{font-weight:700}

/* Responsive */
@media (max-width:560px){
    body{padding:20px 14px;margin:18px auto}
    p {text-align: left;}
    h1{font-size:28px}
    h2{transform:none;padding:8px 6px}
    .subtitle{display:inline-block;margin-left:4px}
}

/* Utility ids (for possible further enhancements) */
#title{margin-bottom:6px}
#section-1,#section-2,#section-3,#section-4{margin-top:18px}

/* Accent utilities usable in HTML */
.accent-block{display:inline-block;padding:6px 10px;background:#ff1e1e;color:#fff;font-weight:800}

/* --- Agitprop enhancements: glitch, reveals, grain, motion --- */

/* Glitch effect for .accent using pseudo-elements */
.accent{position:relative;display:inline-block}
.accent::before,.accent::after{
    content: attr(data-text);
    position:absolute;left:0;top:0;right:0;bottom:0;
    pointer-events:none;
}
.accent::before{color:#fff;mix-blend-mode:screen;transform:translateX(-2px);opacity:0.9}
.accent::after{color:#ff7b7b;mix-blend-mode:screen;transform:translateX(2px);opacity:0.85}

@keyframes glitch-x{0%{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}100%{transform:translateX(0)}}
.accent::before{animation:glitch-x 2.2s infinite linear}
.accent::after{animation:glitch-x 2.4s infinite linear reverse}

/* Reveal animation for headings and paragraphs */
.reveal{opacity:1;transform:none}
h2, section p{opacity:0;transform:translateY(10px);transition:opacity 420ms ease var(--delay,0ms), transform 420ms cubic-bezier(.2,.8,.2,1) var(--delay,0ms)}

/* Slide-in for h2's red bar: animate background-position by using mask */
h2{--h2-offset: -120%;}
h2.reveal{transform:skewX(-10deg) translateX(0)}
h2::before{
    content:'';position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;pointer-events:none;
}

p#disclaimer {
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.7em;
    font-style: italic;
    color: var(--muted);
}

/* CTA pulse */
.cta{display:inline-block;transform-origin:center;transition:transform 220ms ease}
.cta.pulse{animation:cta-pulse 1600ms ease-in-out infinite}
@keyframes cta-pulse{0%{transform:scale(1);box-shadow:0 0 0 rgba(255,30,30,0.0)}50%{transform:scale(1.03);box-shadow:0 6px 18px rgba(255,30,30,0.12)}100%{transform:scale(1);box-shadow:0 0 0 rgba(255,30,30,0)}}

/* Grain overlay (subtle) */
.grain-overlay{position:fixed;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:0.06;background-image:radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);background-size:3px 3px;z-index:10}

/* Corner svg slight movement */
.corner-accent{position:fixed;right:0;top:0;width:260px;height:260px;pointer-events:none;z-index:5}
.corner-accent .tri-group{transform-origin:100% 0%;transition:transform 6s ease-in-out}

/* CTA glitch (uses the existing .cta-text[data-text]) - activated by adding .glitch to .cta */
.cta-text{position:relative;display:inline-block}
.cta-text::before,.cta-text::after{
    content:attr(data-text);
    position:absolute;left:0;top:0;right:0;bottom:0;
    pointer-events:none;opacity:0;transform:none;
}
.cta.glitch .cta-text::before{opacity:0.95;color:#fff;mix-blend-mode:screen;transform:translateX(-1px);animation:glitch-x 2.2s infinite linear}
.cta.glitch .cta-text::after{opacity:0.9;color:#ff7b7b;mix-blend-mode:screen;transform:translateX(1px);animation:glitch-x 2.4s infinite linear reverse}
.cta.glitch .cta-text{color:#fff}

/* small skull icon inside CTA */
.cta .skull img{width:1em;height:1em;}

/* Respect users' reduced motion preference */
@media (prefers-reduced-motion: reduce){
    .accent::before,.accent::after{animation:none}
    .tri-group{transition:none}
    .cta,.cta.pulse{animation:none}
    h2, section p{transition:none;opacity:1;transform:none}
}

/* Print styles for poster */
@media print{body{background:#fff;color:#000} .grain-overlay,.corner-accent{display:none} .subtitle{background:#000;color:#fff}}