:root{
  --vermelho:#e20629; --azul:#212b5c; --amarelo:#ffca02; --branco:#fbfaf6; --tinta:#1c1f2b;
  --sans:"Archivo",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --stencil:"Big Shoulders Stencil Display","Archivo",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:#8f8a82}
body{margin:0;color:var(--tinta);font:1.0625rem/1.6 var(--serif)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}

/* parede */
.parede{overflow-x:clip;min-height:100vh;
  background:
    radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.10),transparent 60%),
    radial-gradient(90% 50% at 90% 40%,rgba(0,0,0,.12),transparent 70%),
    linear-gradient(180deg,transparent 70%,rgba(0,0,0,.15)),
    url(img/parede.jpg) 0 0/480px}

/* papel colado */
.colado{position:relative;transform:rotate(var(--giro));
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 5px 9px rgba(0,0,0,.15))}
.papel{position:relative;container-type:inline-size;overflow:hidden}
.papel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(118deg,transparent 35%,rgba(255,255,255,.16) 47%,transparent 58%),
    url(img/papel.jpg) 0 0/560px;
  background-blend-mode:screen,normal;mix-blend-mode:multiply;opacity:.62}
.vermelho>.papel{background:var(--vermelho);color:#fff}
.azul>.papel{background:var(--azul);color:#fff}
.amarelo>.papel{background:var(--amarelo);color:var(--azul)}
.branco>.papel{background:var(--branco);color:var(--azul)}

/* topo */
.topo{position:relative;max-width:76rem;margin:0 auto;padding:2.2rem 1rem 3rem;display:grid;gap:2rem;justify-items:center}
.heroi{width:min(100%,33rem);z-index:2}
.heroi::after{content:"";position:absolute;right:0;bottom:0;width:38px;height:38px;pointer-events:none;
  background:linear-gradient(135deg,#fffdf8 0%,#eeeae1 28%,#d5cfc3 47%,transparent 50%);
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,.35))}
.heroi .papel{display:flex;flex-direction:column}
.faixa-azul{background:var(--azul);margin:4.5cqi 4.5cqi 0;padding:5cqi 5cqi 4cqi}
h1{font-family:var(--sans);font-weight:900;font-stretch:62%;text-transform:uppercase;margin:0;
  font-size:19.5cqi;line-height:.84;letter-spacing:-.005em;color:#fff}
.meio{position:relative;min-height:52cqi;padding:6cqi 5cqi 5cqi}
.triangulo{position:absolute;inset:0;background:var(--azul);clip-path:polygon(0 0,76% 100%,0 100%)}
.caranguejo{position:absolute;left:3.5cqi;bottom:3cqi;width:25cqi}
.chamada{position:relative;margin-left:38cqi;display:flex;flex-direction:column;align-items:flex-start;gap:3.5cqi}
.grito{font-family:var(--sans);font-weight:900;font-stretch:72%;font-size:7.6cqi;line-height:.95;margin:0;color:#fff;text-transform:uppercase}
.pilula{font-family:var(--sans);font-weight:900;font-stretch:75%;text-transform:uppercase;text-decoration:none;
  background:var(--amarelo);color:var(--azul);border-radius:999px;padding:.55em 1.1em .6em;font-size:max(1.05rem,5.2cqi);line-height:1;
  box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pilula:hover{background:#fff}
.miudo{font-family:var(--sans);font-weight:700;margin:0;font-size:max(.85rem,3.6cqi);color:#fff}
.faixa-amarela{background:var(--amarelo);clip-path:polygon(0 34%,100% 0,100% 100%,0 100%);padding:9cqi 0 3cqi;display:grid;place-items:center;margin-top:-6cqi}
.faixa-amarela img{width:34cqi}

.arte{width:min(86%,26rem);z-index:3;margin-top:-1rem}
.arte img{width:100%}

.adesivo{position:absolute;z-index:3;left:-1.6rem;bottom:-3.4rem;margin:0;width:7.6rem;height:7.6rem;border-radius:50%;
  background:var(--amarelo);color:var(--azul);display:grid;place-content:center;text-align:center;padding:.8rem;
  font:800 .82rem/1.05 var(--sans);font-stretch:85%;transform:rotate(11deg);
  box-shadow:0 1px 1px rgba(0,0,0,.4),0 6px 12px rgba(0,0,0,.2)}
.adesivo strong{display:block;font-size:1.6rem;font-weight:900;font-stretch:65%;line-height:.95;margin-top:.25rem;color:var(--vermelho)}

.etiqueta{display:inline-block;font:800 1rem var(--sans);font-stretch:85%;text-decoration:none;color:var(--azul);
  background:var(--branco);padding:.6rem 1rem;border:0;cursor:pointer;transform:rotate(-2deg);
  box-shadow:0 1px 1px rgba(0,0,0,.35),0 5px 10px rgba(0,0,0,.15)}
.etiqueta:hover{background:var(--amarelo)}
.ler{z-index:3;justify-self:end;margin-right:6%}

/* restos de cartazes antigos na parede */
.resto{position:absolute;z-index:0;opacity:.62;background-color:#e4dfd3}
.resto::after{content:"";position:absolute;inset:0;background:url(img/papel.jpg) 0 0/420px;mix-blend-mode:multiply}
.r0{width:17rem;height:23rem;left:-6rem;top:12rem;transform:rotate(3deg);
  background-image:linear-gradient(180deg,rgba(33,43,92,.34) 0 34%,transparent 34%)}
.r1{width:13rem;height:17rem;right:-5rem;top:30rem;transform:rotate(-2deg);
  background-image:linear-gradient(180deg,transparent 0 58%,rgba(226,6,41,.26) 58%)}
.r2{width:12rem;height:10rem;right:24%;top:-4rem;transform:rotate(1.5deg);
  background-image:linear-gradient(180deg,rgba(255,202,2,.4) 0 22%,transparent 22%)}

@media (min-width:60rem){
  .topo{grid-template-columns:1.25fr 1fr;align-items:start;padding-top:3.5rem;padding-bottom:5rem}
  .heroi{justify-self:end}
  .arte{justify-self:start;margin:4.5rem 0 0 -2.5rem;width:min(100%,25rem)}
  .adesivo{left:-5.2rem;bottom:-6.2rem;width:8.6rem;height:8.6rem;font-size:.9rem}
  .ler{position:absolute;left:calc(50% + 6rem);bottom:2.2rem}
}

/* títulos em estêncil spray */
.spray{font-family:var(--stencil);font-weight:800;text-transform:uppercase;color:rgba(12,12,12,.88);
  font-size:clamp(2.6rem,9vw,5.2rem);line-height:.9;letter-spacing:.02em;text-align:center;margin:3rem 1rem 1.6rem;padding:.3em .1em .12em;
  mix-blend-mode:multiply;transform:rotate(-1.4deg)}
main .spray:nth-of-type(2){transform:rotate(.9deg)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .spray{background:url(img/tinta.jpg) 0 0/300px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.spray.pequeno{font-size:2.2rem;margin:0 0 .4rem;width:100%}

/* propostas */
main{max-width:76rem;margin:0 auto;padding:0 1rem}
.propostas{list-style:none;margin:0 auto;padding:0;max-width:64rem;display:grid;gap:2.4rem 2.6rem}
@media (min-width:46rem){.propostas{grid-template-columns:1fr 1fr}}
.lambe .papel{padding:1.6rem 1.6rem 1.5rem;min-height:15rem}
.num{display:block;font-family:var(--sans);font-weight:900;font-stretch:62%;font-size:7.5rem;line-height:.78;color:var(--vermelho);margin-bottom:.6rem}
.vermelho .num{color:var(--amarelo)}
.lambe h3{font-family:var(--sans);font-weight:900;font-stretch:78%;text-transform:uppercase;font-size:1.65rem;line-height:1;margin:0 0 1rem}
details summary{font-family:var(--sans);font-weight:800;font-size:.95rem;cursor:pointer;width:max-content;text-decoration:underline;text-underline-offset:.2em}
details[open] summary{margin-bottom:.5rem}
details p{margin:0;font-size:.98rem;line-height:1.55}

/* folha do manifesto */
.folha{max-width:44rem;margin:0 auto}
.folha .papel{background:var(--branco);padding:2.6rem 1.5rem 2.2rem}
.folha .papel::after{opacity:.45}
@media (min-width:40rem){.folha .papel{padding:3.4rem 3.2rem 3rem}}
.folha h3{font-family:var(--sans);font-weight:900;font-stretch:72%;text-transform:uppercase;color:var(--azul);font-size:clamp(1.6rem,5vw,2.3rem);line-height:.95;margin:0 0 1.8rem;max-width:20ch}
.folha p{margin:0 0 1.15em;line-height:1.72;hyphens:auto}
.folha p:first-of-type::first-letter{font-family:var(--sans);font-weight:900;font-stretch:62%;float:left;font-size:4.8em;line-height:.8;margin:.07em .08em 0 0;color:var(--vermelho)}
.data{font-style:italic}

/* abaixo-assinado */
.abaixo{max-width:44rem;margin:0 auto}
.abaixo .papel{background:#fff;padding:2.2rem 1.4rem 2rem 3.2rem;
  background-image:linear-gradient(90deg,transparent 2.3rem,rgba(227,18,45,.45) 2.3rem,rgba(227,18,45,.45) 2.4rem,transparent 2.4rem),
    repeating-linear-gradient(180deg,transparent 0 2.05rem,rgba(35,48,95,.18) 2.05rem 2.12rem);background-position:0 0,0 .35rem}
.abaixo .papel::after{opacity:.4}
.abaixo h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:0 0 1rem;color:var(--azul);line-height:2.12rem}
.abaixo ul{list-style:none;margin:0;padding:0;columns:2 15rem;column-gap:1.6rem}
.abaixo li{break-inside:avoid;font-size:.92rem;line-height:2.12rem}
.abaixo b{font-family:var(--sans);font-weight:700;color:var(--azul)}
.abaixo span{color:#5c5f69}
.vazio{display:block;margin-top:2.12rem;line-height:2rem;border-bottom:2px dashed var(--vermelho);font-style:italic;color:var(--vermelho);text-decoration:none;font-size:1.15rem}
.vazio:hover{background:rgba(253,199,0,.35)}
.mais{font-size:.9rem;margin:1.2rem 0 0;color:#5c5f69}

/* fim */
.fim{max-width:76rem;margin:0 auto;padding:4.5rem 1rem 3rem;display:grid;justify-items:center;gap:2.5rem}
.cartaz-fim{width:min(100%,32rem)}
.cartaz-fim .papel{padding:2rem 2rem 2.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem}
.falta{font-family:var(--sans);font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:24cqi;line-height:.84;margin:0;color:#fff}
.partilha{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1rem;max-width:30rem}
.partilha .etiqueta:nth-of-type(2n){transform:rotate(2.5deg)}
.partilha .etiqueta:nth-of-type(3n){transform:rotate(-3.5deg)}
.credito{font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--tinta);text-align:center;max-width:52ch;margin:1rem 0 0}

/* o único movimento: o cartaz sendo colado */
@media (prefers-reduced-motion:no-preference){
  .heroi{animation:cola .6s cubic-bezier(.2,.9,.25,1.15) both}
  .adesivo{animation:adesivo .35s .55s cubic-bezier(.3,1.6,.5,1) both}
}
@keyframes cola{from{opacity:0;transform:rotate(-8deg) scale(1.08) translateY(-18px)}}
@keyframes adesivo{from{opacity:0;transform:rotate(30deg) scale(.4)}}